Checkbox
A control that allows the user to toggle between checked and not checked.
Basic Usage
Example
Checkbox Group
Use BrCheckboxGroup to group multiple checkboxes.
Selected: [
"apple"
]
Example
Indeterminate State
The indeterminate state is used when a checkbox's state is neither checked nor unchecked.
Example
Sizes
We provide a default set of sizes that you can control via the size prop.
Example
Disabled State
Disabled Group
Example
Theming
Global Customization (BrConfigProvider)
You can override default CSS variables via the theme prop of BrConfigProvider.
vue
<template>
<BrConfigProvider :theme="{ primary: '#10B981', radius: 0.5 }">
<BrCheckbox v-model="checked" label="Custom Theme" />
</BrConfigProvider>
</template>Local Customization (TailwindCSS)
You can directly override styles using TailwindCSS utility classes on the wrapper or via deep selectors if needed, but wrapper class is usually sufficient for layout.
vue
<template>
<BrCheckbox class="mb-4" label="Margin Bottom" />
</template>API
BrCheckbox
Props
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | boolean | string | number | undefined | Binding value |
| value | string | number | boolean | undefined | Value of the checkbox (used in group) |
| disabled | boolean | false | Whether the checkbox is disabled |
| indeterminate | boolean | false | Whether the checkbox is in indeterminate state |
| label | string | undefined | Label text |
| id | string | undefined | Input id |
| name | string | undefined | Input name |
| required | boolean | false | Whether the checkbox is required |
| error | boolean | false | Whether the checkbox is in error state |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'default' | 'default' | Size of the checkbox |
Emits
| Name | Description | Parameters |
|---|---|---|
| update:modelValue | Update model value | (value: boolean | string | number) |
| change | Change event | (value: boolean | string | number) |
Slots
| Name | Description |
|---|---|
| default | Label content |
| icon | Custom icon slot |
BrCheckboxGroup
Props
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | (string | number)[] | [] | Binding value array |
| disabled | boolean | false | Whether the group is disabled |
| size | 'sm' | 'default' | 'lg' | 'default' | Size of all checkboxes in the group |
| name | string | undefined | Name attribute for all checkboxes |
Emits
| Name | Description | Parameters |
|---|---|---|
| update:modelValue | Update model value | (value: (string | number)[]) |
| change | Change event | (value: (string | number)[]) |