Radio #
The va-radio
allows the user to select one option from a set.
Examples #
Default #
Default usage of the va-radio
component.
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.
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
color | Color of the component (theme string or |
|
|
disabled | Applies |
|
|
label | Same as native |
|
|
left-label | Moves the label on the left of a component. |
|
|
model-value | The value of the |
|
|
name | Applies |
|
|
option | Option value that model is updated to when an option is selected |
|
|
preset | Named preset combination of component props. |
| - |
readonly | Doesn't look disabled, but acts like one. Mostly useful for wrapper components. |
|
|
tabindex | Sets a custom tabindex |
|
|
Events #
Name | Description |
---|---|
focus | On focus. |
update-model-value | 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-margin-top | 0 |
--va-radio-margin-right | 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-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 0.125rem |
--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 |