<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><br> <wa-radio value="2">Option 2</wa-radio><br> <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.
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><br> <wa-radio value="2">Option 2</wa-radio><br> <wa-radio value="3">Option 3</wa-radio> </wa-radio-group>
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><br> <wa-radio value="2" disabled>Option 2</wa-radio><br> <wa-radio value="3">Option 3</wa-radio> </wa-radio-group>
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><br> <wa-radio value="2">Small 2</wa-radio><br> <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><br> <wa-radio value="2">Medium 2</wa-radio><br> <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><br> <wa-radio value="2">Large 2</wa-radio><br> <wa-radio value="3">Large 3</wa-radio> </wa-radio-group>
| Name | Description |
|---|---|
| (default) | The radio's label. |
| Name | Description | Reflects | |
|---|---|---|---|
formform
|
The string pointing to a form's id.
Type
string | null
Default
null
|
|
|
valuevalue
|
The radio's value. When selected, the radio group will receive this value.
Type
string
|
|
|
sizesize
|
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'
Default
'medium'
|
|
|
disableddisabled
|
Disables the radio.
Type
boolean
Default
false
|
| Name | Description |
|---|---|
wa-blur |
Emitted when the control loses focus. |
wa-focus |
Emitted when the control gains focus. |
| 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.
|
| Name | Description |
|---|---|
base |
The component's base wrapper. |
control |
The circular container that wraps the radio's checked state. |
control--checked |
The radio control when the radio is checked. |
checked-icon |
The checked icon. |
label |
The container that wraps the radio's label. |
This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.
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.4/dist/components/radio/radio.js';