Switch

Sizes

States

A Switch component for toggling settings.

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

html

<flint-switch></flint-switch>

Property	Attribute	Type	Default	Description
`checked`	`checked`	`boolean`	`false`	Current checked state (controlled). When set, the component reflects this state and does not manage its own state.
`disabled`	`disabled`	`boolean`	`false`	Disables the switch and prevents interaction.
`required`	`required`	`boolean`	`false`	Marks the switch as required for form validation.
`size`	`size`	`Size`	`'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 (uncontrolled). Only used on first render; ignored after mount.
`ariaLabel`	`aria-label`	`string \| null`	`null`	Accessible label for screen readers when no visible label is provided.

Event	Detail	Description
`flint-switch-change`	`{ checked: boolean }`	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).

Name	Description
`base`	The switch's base wrapper element.
`control`	The switch track element.
`thumb`	The switch thumb (knob) element.
`label`	The label text element.

Switch ​