Switch

Boolean on/off toggle. Since it renders a plain <input type="checkbox" role="switch"> with no associated <label>, always set label (used as aria-label).

Renders in light DOM (scoped styles, not Shadow DOM) on purpose: the checkbox this component renders is a real descendant of whatever <form> wraps it, so FormData, native required validation, and <fieldset disabled> all work without any extra wiring — the visible track/thumb are styled purely off the checkbox’s own :checked/:disabled state via Tailwind peer-* variants, and wrapping everything in a <label> gives click-to-toggle for free. form.reset() restores the original default, the same as Input and Select.

Example

<and-switch label="Enable notifications" name="notifications" checked></and-switch>

Properties

Property	Attribute	Description	Type	Default
`checked`	`checked`	Whether the switch is on.	`boolean`	`false`
`customClass`	`class`	Additional CSS classes from the consumer.	`string`	`''`
`describedBy`	`described-by`	ID of the element that describes this switch (e.g. hint or error message).	`string`	`''`
`disabled`	`disabled`	Disables interaction when true.	`boolean`	`false`
`label`	`label`	Accessible label for the switch (used when no visible label exists).	`string`	`''`
`name`	`name`	Name attribute forwarded to the native checkbox — required for it to show up in `FormData`.	`string`	`''`
`required`	`required`	Marks the switch as required (must be checked to submit).	`boolean`	`false`
`value`	`value`	Value submitted in `FormData` when checked. Defaults to the native checkbox default ("on") when unset.	`string`	`''`

Events

Event	Description	Type
`andSwitchChange`	Emitted when the checked state changes.	`CustomEvent<boolean>`

Generated from packages/web-components/src/components/and-switch/readme.md — keep this in sync with the Stencil source, don't hand-edit the numbers.