Radio

<wa-radio> Since 2.0 stable

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

This component must be used as a child of <wa-radio-group>. Please see the Radio Group docs to see examples of this component in action.

Slots

Learn more about using slots.

Name Description
(default) The radio's label.

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
appearance
appearance
The radio's value. When selected, the radio group will receive this value.
Type 'default' | 'button'
Default 'default'
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'
Default 'medium'
disabled
disabled
Disables the radio.
Type boolean
Default false

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
--checked-icon-color
The color of the checked icon.
--checked-icon-scale
The size of the checked icon relative to 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.

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';

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

import '@awesome.me/webawesome/dist/components/radio/radio.js';

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

import '@awesome.me/webawesome/dist/react/radio';
Need a hand? Report a bug Ask for help
    No results