Components Radio Group

Radio

<wa-radio> Since 2.0 Stable

Radios allow the user to select a single option from a group.

Just want the styles? Check out the Radio native styles!

Radios are designed to be used with radio groups.

Option 1 Option 2 Option 3 
<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

Initial Value

To set the initial value and checked state, use the value attribute on the containing radio group.

Option 1 Option 2 Option 3 
<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

Use the disabled attribute to disable a radio.

Option 1 Option 2 Option 3 
<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

Add the size attribute to the Radio Group to change the radios' size.

Small 1 Small 2 Small 3
Medium 1 Medium 2 Medium 3
Large 1 Large 2 Large 3 
<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

Add descriptive hint to a switch with the hint attribute. For hints that contain HTML, use the hint slot instead.

Option 1 Option 2 Option 3 
<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

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

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

Learn more about events.

Name Description
blur Emitted when the control loses focus.
focus Emitted when the control gains focus.

CSS custom properties

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

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

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

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code. 

import 'https://early.webawesome.com/[email protected]/dist/components/radio/radio.js';
Coming soon! Coming soon!
    No results