Radio
Select an option from a set
Examples
Base
Selection: Jack
Show code
Variants
Selection: default
Show code
Sizes
Selection: small
Show code
Class props
| Class prop | Description | Props | Suffixes | |
|---|---|---|---|---|
| checkedClass | Class of the root element when checked. | |||
| disabledClass | Class when radio is disabled. | disabled | ||
| inputCheckedClass | Class of the native input element when checked. | |||
| inputClass | Class of the native input element. | |||
| labelClass | Class of the radio label. | |||
| rootClass | Class of the root element. | |||
| sizeClass | Class of the radio size. | size | small | |
| variantClass | Class of the radio variant. | variant | primary |
Radio component
Select an option from a set
html
<o-radio></o-radio>Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| autocomplete | Same as native autocomplete options to use in HTML5 validation | string | - | From config: radio: { |
| disabled | Same as native disabled | boolean | - | false |
| label | Input label, unnecessary when default slot is used | string | - | |
| v-model | The input value state | string|number|boolean|object | - | |
| name | Same as native name | string | - | |
| nativeValue | Same as native value | string|number|boolean|object | - | |
| override | Override existing theme classes completely | boolean | - | |
| required | Same as native required | boolean | - | false |
| size | Size of the control | string | small, medium, large | From config: radio: { |
| useHtml5Validation | Enable html 5 native validation | boolean | - | From config: { |
| variant | Color of the control | string | primary, info, success, warning, danger, and any other custom color | From config: radio: { |
Events
| Event name | Properties | Description |
|---|---|---|
| update:modelValue | value string | number | boolean | object - updated modelValue prop | modelValue prop two-way binding |
| input | value string | number | boolean | object - input valueevent Event - native event | on input change event |
| focus | event Event - native event | on input focus event |
| blur | event Event - native event | on input blur event |
| invalid | event Event - native event | on input invalid event |
Slots
| Name | Description | Bindings |
|---|---|---|
| default | Override the label, default is label prop |
Sass variables
Current theme ➜ Oruga
| SASS Variable | Default |
|---|---|
| $radio-active-background-color | $primary |
| $radio-checked-box-shadow-length | 0 0 0.5em |
| $radio-checked-box-shadow-opacity | 0.8 |
| $radio-box-shadow | $control-box-shadow |
| $radio-disabled-opacity | var(--#{$prefix}base-disabled-opacity) |
| $radio-label-padding | 0 0 0 0.5em |
| $radio-margin-sibiling | 0.5em |
| $radio-size | 1rem |
| $radio-line-height | 1.25 |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
The theme does not have any custom variables for this component.
Current theme ➜ Bootstrap
The theme does not have any custom variables for this component.