Radio
<wa-radio>
Radios allow the user to select a single option from a group.
Radios are designed to be used with radio groups.
<wa-radio-group label="Select an option" name="a" value="1"> <wa-radio value="1">Option 1</wa-radio> <wa-radio value="2">Option 2</wa-radio> <wa-radio value="3">Option 3</wa-radio> </wa-radio-group>
This component works with standard <form>
elements. Please refer to the section on form controls to learn more about form submission and client-side validation.
Examples Jump to heading
Initial Value Jump to heading
To set the initial value and checked state, use the value
attribute on the containing radio group.
<wa-radio-group label="Select an option" name="a" value="3"> <wa-radio value="1">Option 1</wa-radio> <wa-radio value="2">Option 2</wa-radio> <wa-radio value="3">Option 3</wa-radio> </wa-radio-group>
Disabled Jump to heading
Use the disabled
attribute to disable a radio.
<wa-radio-group label="Select an option" name="a" value="1"> <wa-radio value="1">Option 1</wa-radio> <wa-radio value="2" disabled>Option 2</wa-radio> <wa-radio value="3">Option 3</wa-radio> </wa-radio-group>
Sizes Jump to heading
Add the size
attribute to the Radio Group to change the radios' size.
<wa-radio-group size="small" value="1"> <wa-radio value="1">Small 1</wa-radio> <wa-radio value="2">Small 2</wa-radio> <wa-radio value="3">Small 3</wa-radio> </wa-radio-group> <br /> <wa-radio-group size="medium" value="1"> <wa-radio value="1">Medium 1</wa-radio> <wa-radio value="2">Medium 2</wa-radio> <wa-radio value="3">Medium 3</wa-radio> </wa-radio-group> <br /> <wa-radio-group size="large" value="1"> <wa-radio value="1">Large 1</wa-radio> <wa-radio value="2">Large 2</wa-radio> <wa-radio value="3">Large 3</wa-radio> </wa-radio-group>
Hint Jump to heading
Add descriptive hint to a switch with the hint
attribute. For hints that contain HTML, use the hint
slot instead.
<wa-radio-group label="Select an option" name="a" value="1"> <wa-radio value="1" hint="What should the user know about radio 1?">Option 1</wa-radio> <wa-radio value="2" hint="What should the user know about radio 2?">Option 2</wa-radio> <wa-radio value="3" hint="What should the user know about radio 3?">Option 3</wa-radio> </wa-radio-group>
Slots Jump to heading
Learn more about using slots.
Name | Description |
---|---|
(default) | The radio's label. |
hint
|
Text that describes how to use the checkbox. Alternatively, you can use the hint attribute. |
Attributes & Properties Jump to heading
Learn more about attributes and properties.
Name | Description | Reflects | |
---|---|---|---|
form form |
The string pointing to a form's id.
Type
string | null Default
null |
|
|
value value |
The radio's value. When selected, the radio group will receive this value.
Type
string |
|
|
size size |
The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
attribute can typically be omitted.
Type
'small' | 'medium' | 'large' | 'inherit' Default
'inherit' |
|
|
disabled disabled |
Disables the radio.
Type
boolean Default
false |
||
hint hint |
The radio's hint. If you need to display HTML, use the
hint slot instead.Type
string Default
'' |
Events Jump to heading
Learn more about events.
Name | Description |
---|---|
blur |
Emitted when the control loses focus. |
focus |
Emitted when the control gains focus. |
CSS custom properties Jump to heading
Learn more about CSS custom properties.
Name | Description |
---|---|
--background-color |
The radio's background color.
|
--background-color-checked |
The radio's background color when checked.
|
--border-color |
The color of the radio's borders.
|
--border-color-checked |
The color of the radio's borders when checked.
|
--border-style |
The style of the radio's borders.
|
--border-width |
The width of the radio's borders. Expects a single value.
|
--box-shadow |
The shadow effects around the edges of the radio.
|
--checked-icon-color |
The color of the radio's checked icon.
|
--checked-icon-scale |
The size of the checked icon relative to the radio.
|
--toggle-size |
The size of the radio.
|
Custom States Jump to heading
Learn more about custom states.
Name | Description | CSS selector |
---|---|---|
checked |
Applied when the control is checked. | :state(checked) |
disabled |
Applied when the control is disabled. | :state(disabled) |
CSS parts Jump to heading
Learn more about CSS parts.
Name | Description |
---|---|
control |
The circular container that wraps the radio's checked state. |
checked-icon |
The checked icon. |
label |
The container that wraps the radio's label. |
hint |
The hint's wrapper. |
Dependencies Jump to heading
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.
Importing Jump to heading
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/components/radio/radio.js';