Radio
Examples
Initial value
Disabled
Help text
Importing
Slots
Properties
Events
CSS Parts

Radio

<ahi-radio> | AhiRadio

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

Use radio’s where users must make a single selection.

Option 1

Option 2

Option 3

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

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

Disabled

Use the disabled attribute to disable a radio.

Option 1

Option 2

Option 3

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

Help text

Use the help-text attribute to show additional text to aid in use.

Option 1

Option 2

Option 3

<ahi-radio-group label="Select an option" name="a" value="1">
  <ahi-radio
    value="1"
    help-text="Help text is an accessible way to provide additional information that might help the user"
  >
    Option 1
  </ahi-radio>
  <ahi-radio value="2">Option 2</ahi-radio>
  <ahi-radio value="3">Option 3</ahi-radio>
</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/radio.js"></script>

To import this component using a bundler:

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

Slots

Name	Description
(default)	The radio’s label.
`help-text`	The radio’s help text.

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`	-
`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.	`'small' \| 'medium' \| 'large'`	`'medium'`
`disabled`	Disables the radio.	`boolean`	`false`
`helpText` `help-text`	The radio’s help text. If you need to display HTML, use the `help-text` slot instead.	`string`	`''`
`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 control loses focus.	-
`ahi-focus`	Emitted when the control gains focus.	-

Learn more about events.

CSS Parts

Name	Description
`base`	Deprecated. Use the `radio` part instead.
`radio`	The component’s outer wrapper.
`control`	The circular container that wraps the radio’s checked state.
`label`	The container that wraps the radio’s label.
`help-text`	The help text’s wrapper.

Learn more about customizing CSS parts.