Switch

Sizes

States

A Switch component for toggling settings.

import 'flint-ui'; // auto-registers all
// or
import { FlintSwitch } from 'flint-ui';

html

<flint-switch></flint-switch>

Property	Attribute	Type	Default	Description
`checked`	`checked`	`boolean`	`false`	Whether the switch is toggled on.
`disabled`	`disabled`	`boolean`	`false`	Disables the switch and prevents interaction.
`required`	`required`	`boolean`	`false`	Marks the switch as required for form validation.
`size`	`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the switch control.
`label`	`label`	`string`	`''`	Visible label text displayed next to the switch.
`name`	`name`	`string`	`''`	Form field name used when submitting form data.
`value`	`value`	`string`	`'on'`	Value submitted with form data when checked.
`defaultChecked`	`default-checked`	`boolean`	`false`	Initial checked state for uncontrolled usage.
`ariaLabel`	`aria-label`	`string \| null`	`null`	Accessible label for screen readers when no visible label is provided.

Event	Detail	Description
`flint-switch-change`	—	Dispatched when the switch state changes. Detail: `{ checked: boolean }`

Name	Description
`icon-on`	Optional icon to show when the switch is ON.
`icon-off`	Optional icon to show when the switch is OFF.
`(default)`	Optional label content (used when the `label` prop is not set).

Switch ​