Radio Group
<ahi-radio-group> | AhiRadioGroup
Radio groups are used to group multiple radios so they function as a single form control.
<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>
Examples
Help text
Add descriptive help text to a radio group with the help-text attribute. For help texts that
contain HTML, use the help-text slot instead.
<ahi-radio-group label="Select an option" help-text="Choose the most appropriate 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>
Disabling options
Radios can be disabled by adding the disabled attribute to the respective options inside the
radio group.
<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>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/radio-group/radio-group.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/radio-group/radio-group.js';Slots
| Name | Description |
|---|---|
| (default) |
The default slot where <ahi-radio> or
<ahi-radio-button> elements are placed.
|
label
|
The radio group’s label. Required for proper accessibility. Alternatively, you can use the
label attribute.
|
help-text
|
Text that describes how to use the radio group. Alternatively, you can use the
help-text attribute.
|
error
|
An error message shown once the control is invalid. Plain text can be set with the
error property instead; use this slot when the message needs markup.
|
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
label
|
The radio group’s label. Required for proper accessibility. If you need to display HTML, use the
label slot instead.
|
string
|
''
|
|
helpText
help-text
|
The radio groups’s help text. If you need to display HTML, use the help-text slot
instead.
|
string
|
''
|
|
name
|
The name of the radio group, submitted as a name/value pair with form data. |
string
|
'option'
|
|
value
|
The current value of the radio group, submitted as a name/value pair with form data. |
string
|
''
|
|
size
|
The radio group’s size. This size will be applied to all child radios and radio buttons. |
'small' | 'medium' | 'large'
|
'medium'
|
|
required
|
Ensures a child radio is checked before allowing the containing form to submit. |
boolean
|
false
|
|
error
|
An error message to show on the control, as on <ahi-input>. Setting it makes the
control genuinely invalid and shows the message at once, as the control’s only error, without
waiting for the user to touch it. Clearing it clears that validity. Use the error slot
instead when the message needs markup rather than plain text.
|
string
|
''
|
|
validity
|
Gets the validity state object | - | - | |
validationMessage
|
Gets the validation message | - | - | |
formId
form
|
By default, form controls are associated with the nearest containing
<form> element. This attribute allows you to place the form control outside of a
form and associate it with the form that has this id. The form must be in the same
document or shadow root for this to work.
|
string
|
''
|
|
form
|
The form the control is associated with, following the native form-control contract: reading returns
the associated <form> element (or null if there is none), assigning
takes a form id — assign an empty string to restore association with the nearest containing form.
|
HTMLFormElement | null
|
- | |
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-change |
Emitted when the radio group’s selected value changes. | - |
ahi-input |
Emitted when the radio group receives user input. | - |
ahi-invalid |
Emitted when the form control has been checked for validity and its constraints aren’t satisfied. | - |
Learn more about events.
Methods
| Name | Description | Arguments |
|---|---|---|
checkValidity() |
Checks for validity but does not show a validation message. Returns true when valid and
false when invalid.
|
- |
reportValidity() |
Checks for validity and shows the browser’s validation message if the control is invalid. | - |
setCustomValidity() |
Sets a custom validation message. Pass an empty string to restore validity. |
message:
|
focus() |
Sets focus on the radio-group. |
options: FocusOptions
|
resetValidity() |
Hides validity again, returning the control to its pristine state: it stops matching
:user-invalid and drops its error styling until the user next interacts with it. The
value and the validity are both untouched — an empty required control is still invalid and still
blocks submission. This only changes whether that invalidity is shown. Interaction state
otherwise has exactly one automatic exit, form.reset(). Call this when the application
replaces a value itself and the old error no longer describes anything the user did: loading a
draft, switching which record is being edited, or clearing a filter row.
|
- |
Learn more about methods.
CSS Parts
| Name | Description |
|---|---|
form-control |
The form control that wraps the label, input, and help text. |
form-control-label |
The label’s wrapper. |
form-control-input |
The input’s wrapper. |
form-control-error |
The error’s wrapper. |
form-control-help-text |
The help text’s wrapper. |
button-group |
The button group that wraps radio buttons. |
button-group__base |
The button group’s base part. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<ahi-button-group><ahi-icon>