Radio
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. Based on BrConfigProvider for global theming.
Basic Usage
The most basic usage of radio buttons, usually used with BrRadioGroup.
Example
Disabled State
Set the disabled prop to disable the radio button.
Example
Sizes
We provide a default set of sizes. You can control the size of the radio button via the size prop. Supports xs, sm, md (default), lg, xl, 2xl.
Example
Horizontal Layout
Set the orientation="horizontal" prop to arrange the radio group horizontally.
Example
Theming
Global Customization (BrConfigProvider)
You can override default CSS variables via the theme prop of BrConfigProvider to customize colors, border radius, etc.
Custom Theme (Violet)
Example
Local Customization (TailwindCSS)
You can use TailwindCSS utility classes directly on the component to override styles.
vue
<template>
<BrRadio class="border-red-500" label="Error State" />
</template>API
BrRadio
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| value | string | number | boolean | - | Required. The value of the radio button |
| disabled | boolean | false | Whether the radio is disabled |
| label | string | undefined | Label text |
| id | string | undefined | Input ID |
| name | string | undefined | Input name |
| required | boolean | false | Whether it is required |
| error | boolean | false | Whether it is in error state |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'default' | 'default' | Size of the radio |
Emits
| Event Name | Description | Parameters |
|---|---|---|
| update:modelValue | Update binding value | (value: string | number | boolean) |
| change | Change event | (value: string | number | boolean) |
Slots
| Slot Name | Description |
|---|---|
| default | Label content |
BrRadioGroup
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| modelValue | string | number | boolean | undefined | Binding value |
| disabled | boolean | false | Whether to disable the entire group |
| orientation | 'horizontal' | 'vertical' | 'vertical' | Layout orientation |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'default' | 'default' | Size of all radios in the group |
| name | string | undefined | Name attribute for all radios |
| required | boolean | false | Whether it is required |
| loop | boolean | true | Whether to loop keyboard navigation |
Emits
| Event Name | Description | Parameters |
|---|---|---|
| update:modelValue | Update binding value | (value: string | number | boolean) |
| change | Change event | (value: string | number | boolean) |