Radio #
The va-radio allows the user to select one option from a set.
Examples #
Default #
Default usage of the va-radio component. Make sure to add a name prop to group them together.
Multiple Options #
You can use options prop to pass an array of options to the component. Then multiple components will be rendered.`
You can use more complex options with textBy and valueBy props if needed.
Passing multiple options at the same time allows you to use validation rules.
Colors #
With color prop you can change the color of the component.
Custom Labels #
You can add a label text by setting the label property. To switch label side use left-label property.
Disabled #
With disabled prop you can disable a user interaction with va-radio component.
Slot #
You can use default slot to pass a custom content as text to the component. You can also change icon appearance with icon slot.
Accessibility #
Each option has radio role attribute.
If options prop is used the component has a radiogroup role attribute,
otherwise you need to add role="radiogroup" on parent element manually.
aria-checked is applied on option automatically.
Always set name prop on the component to group options together for correct keyboard navigation.
Set aria-label or aria-labelledby attribute on the component to provide a label for screen readers for radio-group if needed. By default radio element labeled by text from option.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| arrayValue | Same as native |
|
|
| color | Color of the component (theme string or |
|
|
| dirty | Sets the dirty state of the component |
|
|
| disabled | Applies |
|
|
| disabledBy | This prop is used to get the disabled state of the option if option is an object |
|
|
| error | Show component in error state. |
| - |
| errorCount | Number of error messages displayed. |
|
|
| errorMessages | Error messages for the component. |
| - |
| falseValue | Overrides the returned value when it's not checked. |
|
|
| groupBy | When |
|
|
| immediateValidation | Sets the validation to be performed when the component is mounted |
|
|
| indeterminate | Same as native |
|
|
| indeterminateValue | Overrides a state value that is not set. |
|
|
| label | Same as native |
| - |
| leftLabel | Moves the label on the left of a component. |
|
|
| loading | Indicates that something is loading (spinner icon). |
|
|
| messages | Description messages for the component. |
|
|
| modelValue | The value of the |
|
|
| name | Applies |
|
|
| option | Option value that model is updated to when an option is selected |
| - |
| options | Array of options to be rendered |
|
|
| preset | Named preset combination of component props. |
| - |
| readonly | Doesn't look disabled, but acts like one. Mostly useful for wrapper components. |
|
|
| rules | Validation rules . |
|
|
| stateful | Add possibility to work with component without setting |
|
|
| success | Show component in success state. |
|
|
| textBy | This prop is used to get the text of the option if option is an object |
|
|
| trackBy | In case there are options with the same value, to distinguish them you can use this prop |
|
|
| trueValue | Overrides the returned value when it's checked. |
|
|
| valueBy | This prop is used to get the value of the option if option is an object. If not provided, the option itself will be used as a value |
|
|
| vertical |
|
|
Events #
| Name | Description |
|---|---|
blur | On blur. |
focus | On focus. |
update:dirty | Fires when the dirty state changes |
update:error | Fires when the error state changes |
update:errorMessages | Fires when the error messages change |
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
Css Variables #
| Name | Default Value |
|---|---|
| --va-radio-display | inline-flex |
| --va-radio-cursor | pointer |
| --va-radio-position | relative |
| --va-radio-gap | 0.5rem |
| --va-radio-transition | 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) |
| --va-radio-disabled-cursor | default |
| --va-radio-border-color | var(--va-background-border) |
| --va-radio-background | transparent |
| --va-radio-icon-transition | 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) |
| --va-radio-icon-width | 1.4rem |
| --va-radio-icon-height | 1.4rem |
| --va-radio-icon-border-radius | 100% |
| --va-radio-icon-border | var(--va-background-border) solid var(--va-form-element-border-width) |
| --va-radio-dot-transition | 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) |
| --va-radio-dot-top | 50% |
| --va-radio-dot-left | 50% |
| --va-radio-dot-right | 50% |
| --va-radio-dot-bottom | 50% |
| --va-radio-dot-border-radius | 100% |
| --va-radio-dot-background-color | inherit |
| --va-radio-dot-opacity | 0 |
| --va-radio-background-transition | 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) |
| --va-radio-background-top | -0.35rem |
| --va-radio-background-left | -0.35rem |
| --va-radio-background-right | -0.35rem |
| --va-radio-background-bottom | -0.35rem |
| --va-radio-background-background-color | var(--va-background-element) |
| --va-radio-background-border-radius | 100% |
| --va-radio-background-z-index | 0 |
| --va-radio-background-opacity | 0 |
| --va-radio-text-display | inline-flex |
| --va-radio-text-margin-left | 0.5rem |
| --va-radio-text-margin-right | 0 |