3.0.0-alpha.4 Alpha
Light Dark Light Dark System Search /

Radio Button

<wa-radio-button> Since 2.0 stable

Radios buttons allow the user to select a single option from a group using a button-like control.

Radio buttons are designed to be used with radio groups. When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.

Option 1 Option 2 Option 3 
<wa-radio-group label="Select an option" name="a" value="1">
  <wa-radio-button value="1">Option 1</wa-radio-button>
  <wa-radio-button value="2">Option 2</wa-radio-button>
  <wa-radio-button value="3">Option 3</wa-radio-button>
</wa-radio-group>

Examples

Checked States

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="1">
  <wa-radio-button value="1">Option 1</wa-radio-button>
  <wa-radio-button value="2">Option 2</wa-radio-button>
  <wa-radio-button value="3">Option 3</wa-radio-button>
</wa-radio-group>

Disabled

Use the disabled attribute to disable a radio button.

Option 1 Option 2 Option 3 
<wa-radio-group label="Select an option" name="a" value="1">
  <wa-radio-button value="1">Option 1</wa-radio-button>
  <wa-radio-button value="2" disabled>Option 2</wa-radio-button>
  <wa-radio-button value="3">Option 3</wa-radio-button>
</wa-radio-group>

Sizes

Use the size attribute to change a radio button's size.

Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3 
<wa-radio-group size="small" label="Select an option" name="a" value="1">
  <wa-radio-button value="1">Option 1</wa-radio-button>
  <wa-radio-button value="2">Option 2</wa-radio-button>
  <wa-radio-button value="3">Option 3</wa-radio-button>
</wa-radio-group>

<br />

<wa-radio-group size="medium" label="Select an option" name="a" value="1">
  <wa-radio-button value="1">Option 1</wa-radio-button>
  <wa-radio-button value="2">Option 2</wa-radio-button>
  <wa-radio-button value="3">Option 3</wa-radio-button>
</wa-radio-group>

<br />

<wa-radio-group size="large" label="Select an option" name="a" value="1">
  <wa-radio-button value="1">Option 1</wa-radio-button>
  <wa-radio-button value="2">Option 2</wa-radio-button>
  <wa-radio-button value="3">Option 3</wa-radio-button>
</wa-radio-group>

Pill Buttons

Use the pill attribute to give radio buttons rounded edges.

Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3 
<wa-radio-group size="small" label="Select an option" name="a" value="1">
  <wa-radio-button pill value="1">Option 1</wa-radio-button>
  <wa-radio-button pill value="2">Option 2</wa-radio-button>
  <wa-radio-button pill value="3">Option 3</wa-radio-button>
</wa-radio-group>

<br />

<wa-radio-group size="medium" label="Select an option" name="a" value="1">
  <wa-radio-button pill value="1">Option 1</wa-radio-button>
  <wa-radio-button pill value="2">Option 2</wa-radio-button>
  <wa-radio-button pill value="3">Option 3</wa-radio-button>
</wa-radio-group>

<br />

<wa-radio-group size="large" label="Select an option" name="a" value="1">
  <wa-radio-button pill value="1">Option 1</wa-radio-button>
  <wa-radio-button pill value="2">Option 2</wa-radio-button>
  <wa-radio-button pill value="3">Option 3</wa-radio-button>
</wa-radio-group>

Prefix and Suffix Icons

Use the prefix and suffix slots to add icons.

Option 1 Option 2 Option 3 
<wa-radio-group label="Select an option" name="a" value="1">
  <wa-radio-button value="1">
    <wa-icon slot="prefix" name="archive" variant="solid"></wa-icon>
    Option 1
  </wa-radio-button>

  <wa-radio-button value="2">
    <wa-icon slot="suffix" name="bag-shopping" variant="solid"></wa-icon>
    Option 2
  </wa-radio-button>

  <wa-radio-button value="3">
    <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
    <wa-icon slot="suffix" name="shopping-cart" variant="solid"></wa-icon>
    Option 3
  </wa-radio-button>
</wa-radio-group>

Buttons with Icons

You can omit button labels and use icons instead. Make sure to set a label attribute on each icon so screen readers will announce each option correctly. 

<wa-radio-group label="Select an option" name="a" value="neutral">
  <wa-radio-button value="angry">
    <wa-icon name="face-angry" variant="solid" label="Angry"></wa-icon>
  </wa-radio-button>

  <wa-radio-button value="sad">
    <wa-icon name="face-frown" variant="solid" label="Sad"></wa-icon>
  </wa-radio-button>

  <wa-radio-button value="neutral">
    <wa-icon name="face-meh" variant="solid" label="Neutral"></wa-icon>
  </wa-radio-button>

  <wa-radio-button value="happy">
    <wa-icon name="face-smile" variant="solid" label="Happy"></wa-icon>
  </wa-radio-button>

  <wa-radio-button value="laughing">
    <wa-icon name="face-laugh" variant="solid" label="Laughing"></wa-icon>
  </wa-radio-button>
</wa-radio-group>

Slots

Name Description
(default) The radio button's label.
prefix A presentational prefix icon or similar element.
suffix A presentational suffix icon or similar element.

Properties

Name Description Reflects
value
value
The radio's value. When selected, the radio group will receive this value.
Type string
disabled
disabled
Disables the radio button.
Type boolean
Default false
size
size
The radio button'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'
pill
pill
Draws a pill-style radio button with rounded edges.
Type boolean
Default false
form
form
The string pointing to a form's id.
Type string | null
Default null
withPrefix
with-prefix
Used for SSR. if true, will show slotted prefix on initial render.
Type boolean
Default false
withSuffix
with-suffix
Used for SSR. if true, will show slotted suffix on initial render.
Type boolean
Default false
withLabel
with-label
Used for SSR. if true, will show slotted suffix on initial render. (should this be withDefault, since its the default slot??)
Type boolean
Default false

Methods

Name Description Arguments
focus() Sets focus on the radio button. options: FocusOptions
blur() Removes focus from the radio button.

Events

Name Description
wa-blur Emitted when the button loses focus.
wa-focus Emitted when the button gains focus.

CSS custom properties

Name Description
--background-color
The button's background color.
--background-color-active
The button's background color when active.
--background-color-hover
The button's background color on hover.
--border-color
The color of the button's border.
--border-color-active
The color of the button's border when active.
--border-color-hover
The color of the button's border on hover.
--border-radius
The radius of the button's corners.
--border-style
The style of the button's border.
--border-width
The width of the button's border. Expects a single value.
--box-shadow
The shadow effects around the edges of the button.
--indicator-color
The color of the checked button indicator.
--indicator-width
The width of the checked button indicator.
--label-color
The color of the button's label.
--label-color-active
The color of the button's label when active.
--label-color-hover
The color of the button's label on hover.

CSS parts

Name Description
base The component's base wrapper.
button The internal <button> element.
button--checked The internal button element when the radio button is checked.
prefix The container that wraps the prefix.
label The container that wraps the radio button's label.
suffix The container that wraps the suffix.

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/webawesome@3.0.0-alpha.4/dist/components/radio-button/radio-button.js';
 Coming soon! Coming soon!
    No results