Radio
The Radio input component uses HTML's native radio inputs to allow a user to select one value from a set of options. The component supports the W3C ARIA APG Radio Group Pattern. Use it with the Field component to access all the functionalities.
Examples
Base
A radio component will render one selection at a time. Use the native-value
property to specify the value that will be used as the modelValue
property when the specific radio is checked.
Variants
Different styles can be achieved with the variant
prop.
Sizes
The component can be displayed in different sizes using the size
prop.
Radio component
Select an option from a set of options.
<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: { |
customValidity | Custom HTML 5 validation error to set on the form control | string | ((currentValue: unknown, state: ValidityState) => string) | - |
|
disabled | Same as native disabled | boolean | - | false |
id | Same as native id. Also set the for label for o-field wrapper - default is an uuid. | string | - | useId() |
label | Input label, unnecessary when default slot is used | string | - | |
v-model | The input value state, use v-model to make it two-way binding | unknown | - | |
name | Same as native name | string | - | |
nativeValue | Same as native value | unknown | - | |
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:model-value | value T - updated modelValue prop | modelValue prop two-way binding |
input | value T - 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 |
Class Inspector
Class prop | Description | Props | Suffixes | |
---|---|---|---|---|
rootClass | Class of the root element. | |||
checkedClass | Class of the root element when checked. | modelValue | ||
sizeClass | Class of the root element with size. | size | small | |
variantClass | Class of the root element with variant. | variant | primary | |
disabledClass | Class of the root element when disabled. | disabled | ||
inputClass | Class of the native input element. | |||
labelClass | Class of the radio label element. |
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
SASS Variable | Default |
---|---|
$radio-size | 1.25em |
$radio-colors | dv.$colors |
$radio-active-background-color | css.getVar("primary") |
$radio-border-color | css.getVar("grey") |
$radio-shadow | css.getVar("shadow") |
See ➜ 📄 Full scss file
Current theme ➜ Bootstrap
The theme does not have any custom variables for this component.