Forms

Switch

A native checkbox presented as a switch for binary preferences and settings.

Component

import { Switch } from "@swirski/ui";

4 controls

Studio modeUse switch semantics without giving up native forms.

Controls

label

description

checked

disabled

<Switch
  label="Studio mode"
  description="Use switch semantics without giving up native forms."
  defaultChecked
/>

7 generated

Prop	Type	Default	Notes
`containerClassName`	`string`	`-`	Adds classes to the root label wrapper.
`description`	`ReactNode`	`-`	Optional supporting text below the label.
`inputClassName`	`string`	`-`	Generated from SwitchProps.
`label`	`ReactNode`	`-`	Visible label rendered beside the switch.
`size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from SwitchProps.
`tone`	`'blue' \| 'yellow' \| 'red'`	`"blue"`	Generated from SwitchProps.
`variant`	`'default' \| 'card'`	`"default"`	Generated from SwitchProps.
`className`	`string`	`-`	Adds classes to the hidden native checkbox input.
`disabled`	`boolean`	`false`	Disables interaction and dims the wrapper.
`...inputProps`	`Omit<InputHTMLAttributes<HTMLInputElement>, "type">`	`-`	Forwarded to the native switch input.