Overview
This is a radio button component:
Current value: val-b
A radio button is used to make a single selection from a group of options. Radio buttons should be used instead of checkboxes if only one option can be selected.
Layout
- Align with container margin
- Stack vertically in lists
- Avoid nesting radio buttons
Label
- Labels should be short and concise
- Labels should be positioned above the radio button group
Guidelines
- There must always be exactly one radio button selected within a group
- If the user is allowed to not select any of the options, provide a "None" option
- By default, the first radio option is selected, but may be configured to have any option preselected
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
label | Text label | string |
null
| — |
showLabel | Whether or not to show the label | boolean |
true
| — |
v-model | Component data with which to associate this radio button and its siblings | string|number|boolean | — | true |
buttonValue | Unique value that will be assigned to v-model data when this radio button is selected | string|number|boolean |
null
| — |
value | (DEPRECATED) | string|number|boolean |
null
| — |
description | If provided, description underneath label text | string |
null
| — |
disabled | Whether or not the field is disabled | boolean |
false
| — |
autofocus | Whether or not to auto-focus on mount | boolean |
false
| — |
truncateLabel | Whether or not to truncate label | boolean |
false
| — |
Events
| Name | Description |
|---|---|
keydown | Emitted with keydown events |
change | Emitted on each change with new boolean of button state |
input | Used to set buttonValue to v-model when checked |
blur | Emits blur event, useful for validation |
Slots
| Name | Description |
|---|---|
default | Optional slot as alternative to label prop |
Methods
| Name | Description |
|---|---|
focus | Puts keyboard focus on the radiobutton |