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 |