Radio Button
Examples
Checked states
Disabled
Sizes
Prefix and suffix icons
Importing
Slots
Properties
Events
Methods
CSS Parts

Radio Button

<ahi-radio-button> | AhiRadioButton

Radio 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

<ahi-radio-group label="Select an option" name="a" value="1">
  <ahi-radio-button value="1">Option 1</ahi-radio-button>
  <ahi-radio-button value="2">Option 2</ahi-radio-button>
  <ahi-radio-button value="3">Option 3</ahi-radio-button>
</ahi-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

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

Disabled

Use the disabled attribute to disable a radio button.

Option 1

Option 2

Option 3

<ahi-radio-group label="Select an option" name="a" value="1">
  <ahi-radio-button value="1">Option 1</ahi-radio-button>
  <ahi-radio-button value="2" disabled>Option 2</ahi-radio-button>
  <ahi-radio-button value="3">Option 3</ahi-radio-button>
</ahi-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

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

<br />

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

<br />

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

Prefix and suffix icons

Use the prefix and suffix slots to add icons.

Option 1

Option 2

Option 3

<ahi-radio-group label="Select an option" name="a" value="1">
  <ahi-radio-button value="1">
    <ahi-icon slot="prefix" name="archive"></ahi-icon>
    Option 1
  </ahi-radio-button>

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

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

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/radio-button/radio-button.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/radio-button/radio-button.js';

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.

Learn more about using slots.

Properties

Name	Description	Type	Default
`value`	The radio’s value. When selected, the radio group will receive this value.	`string`	-
`disabled`	Disables the radio button.	`boolean`	`false`
`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.	`'small' \| 'medium' \| 'large'`	`'medium'`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.

Events

Name	Description	Event Detail
`ahi-blur`	Emitted when the button loses focus.	-
`ahi-focus`	Emitted when the button gains focus.	-

Learn more about events.

Methods

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

Learn more about methods.

CSS Parts

Name	Description
`base`	Deprecated. Use the `radio-button` part instead.
`radio-button`	The component’s outer 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.

Learn more about customizing CSS parts.