Toggle
<ahi-toggle> | AhiToggle
Toggles allow the user to turn an option on or off.
<ahi-toggle>Toggle</ahi-toggle>
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
Checked
Use the checked attribute to activate the toggle.
<ahi-toggle checked>Toggle</ahi-toggle>
Disabled
Use the disabled attribute to disable the toggle.
<ahi-toggle disabled>Toggle</ahi-toggle>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/toggle/toggle.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/toggle/toggle.js';Slots
| Name | Description |
|---|---|
| (default) | The toggle’s label. |
help-text
|
Text that describes how to use the toggle. Alternatively, you can use the
help-text attribute.
|
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
checked
|
Draws the toggle in a checked state. |
boolean
|
false
|
|
disabled
|
Disables the toggle. |
boolean
|
false
|
|
name
|
The name of the toggle, submitted as a name/value pair with form data. |
string
|
- | |
required
|
Makes the toggle a required field. |
boolean
|
false
|
|
helpText
help-text
|
The toggle’s help text. If you need to display HTML, use the help-text slot instead.
|
string
|
''
|
|
value
|
The current value of the toggle, submitted as a name/value pair with form data. |
string
|
- | |
defaultChecked
|
The default value of the form control. Primarily used for resetting the form control. |
boolean
|
false
|
|
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-blur |
Emitted when the control loses focus. | - |
ahi-change |
Emitted when the control’s checked state changes. | - |
ahi-input |
Emitted when the control receives input. | - |
ahi-focus |
Emitted when the control gains focus. | - |
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 |
|---|---|---|
click() |
Simulates a click on the toggle. | - |
focus() |
Sets focus on the toggle. |
options: FocusOptions
|
blur() |
Removes focus from the toggle. | - |
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. If message is not empty, the field will be considered
invalid.
|
message: string
|
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 |
|---|---|
base |
Deprecated. Use the toggle part instead. |
toggle |
The component’s outer wrapper. |
control |
The control that houses the toggle’s thumb |
thumb |
The toggle’s thumb |
label |
The toggle’s label |
form-control-help-text |
The help text’s wrapper. |
Learn more about customizing CSS parts.