Usage
Radio buttons allow users to choose one option from the list of mutually exclusive options. Radio buttons should always be used within the fieldset component and never as a single item.
Best practices
Do
Use radio buttons to choose one option from the list.
Don't
Don’t use radio buttons to choose more than one option. Use a checkbox instead.
Do
Use radio buttons when the list includes at least two mutually exclusive options.
Don't
Don’t use radio buttons with only one option. Use a checkbox instead.
Do
Use a hint to provide additional information about the radio.
Don't
Don’t hide additional information behind tooltips or icons.
Examples
Live Preview
Props
| Name | Description | Type | Default | Values |
|---|---|---|---|---|
hint | Text displayed under the label with additional information | string | ||
label Required | Label of the input element | string | ||
required | Determines whether the input is required or not. | boolean | ||
v-model model-value v2, wc checked v1 | Controls whether the input is checked or not. Do not use empty string as the default value as it is evaluated as truthy by vue and will make the radio button selected by default. | boolean|number|string | null | |
name Required | Name of the radio | string | ||
value Required | Value of the input | boolean|number|string |
Events
| Name | Description | Type |
|---|---|---|
v-model update:modelValue v2, wc change v1 | Emit an event with the current state of the radio | { "names": [ "Boolean, Number, String" ] } |
Slots
| Name | Description |
|---|---|
hint | Use it to provide rich content for input hint. Takes precedence over hint property. |