Radio #
The va-radio allows the user to select one option from a set.
Examples #
Default #
Default usage of the va-radio component.
Selected: one
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.
Selected: one
Disabled #
With disabled prop you can disable a user interaction with va-radio component.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| color |
|
| |
| disabled |
|
| |
| label |
|
| |
| leftLabel |
|
| |
| modelValue |
|
| |
| name |
|
| |
| option |
|
| |
| preset |
| - | |
| readonly |
|
| |
| tabindex |
|
|
Events #
| Name | Description |
|---|---|
focus | On focus. |
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-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 |