A form-associated toggle switch component that integrates with HTML forms via ElementInternals API. `ed-toggle` renders...

A form-associated toggle switch component that integrates with HTML forms via ElementInternals API. `ed-toggle` renders a single-switch toggle input (styled checkbox) with optional label and field notes. It automatically participates in form submission, validation, and reset operations. The component supports checked/unchecked states, disabled state, required validation, and validation state feedback. Use this component for: - On/off binary choice inputs that need native form participation - Settings, opt-ins, consent forms, and feature toggles - Accessible toggle controls with associated labels - Forms that require validation and reset handling The component fires a custom `change` event when toggled and supports Enter key for state changes. Checked state is visually indicated by the toggle animation and an optional check icon.

<ed-toggle></ed-toggle>

Properties

Name Type Default Description
variant String 'primary' A form-associated toggle switch component that integrates with HTML forms via ElementInternals API. `ed-toggle` renders a single-switch toggle input (styled checkbox) with optional label and field notes. It automatically participates in form submission, validation, and reset operations. The component supports checked/unchecked states, disabled state, required validation, and validation state feedback. Use this component for: - On/off binary choice inputs that need native form participation - Settings, opt-ins, consent forms, and feature toggles - Accessible toggle controls with associated labels - Forms that require validation and reset handling The component fires a custom `change` event when toggled and supports Enter key for state changes. Checked state is visually indicated by the toggle animation and an optional check icon. / export class EdToggle extends EdFormElement { readonly type = 'checkbox'; static get styles() { return unsafeCSS(styles.toString()); } /** Variant <ul> <li>**primary** Styled with brand color for prominent toggle controls</li> </ul>
disabled Boolean boolean Disabled state - If true, makes the checkbox within the toggle disabled
checked Boolean boolean Checked state - If true, sets toggle the checkbox to active - If false, sets toggle the checkbox to active
ariaDescribedBy String string Aria describedby 1) Used to connect the field note and errorNote for accessibility
fieldId String string Field ID - Links the label to the checkbox - By default it is autogenerated by nanoid
label String string = 'Toggle' Label - The text that appears inside the label tag - This does not display on the front-end, but is used for accessibility
name String string Name attribute - The name attribute used on the checkbox
isSuccess Boolean boolean Success state
isError Boolean boolean Error state
fieldNote String string Description for the field
required Boolean false Required attribute

Slots

Name Description
off Optional content to display next to the toggle switch (e.g., "Off" label)
field-note Optional slot for field note content (overrides fieldNote property)

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/toggle/toggle.ts