Switch

An instant on/off toggle. A native checkbox with role="switch", so it submits with a form and toggles from the keyboard.

src/components/ui/switch.tsx

About

From the component's own source, where it was written.

A checkbox under the hood, presented as a track and thumb.

role="switch" on the native input keeps form submission and keyboard toggling while announcing the right thing. The thumb travels by translate, which is a transform — but it is the control's *state*, not a hover flourish, so the kit's no-motion rule does not apply.

Install

npx astralyx-ui add switch

Usage

import { Switch } from '@/components/ui/switch'

<Switch label="Dark mode" defaultChecked />

Composer

Change the props and the source below follows.

Dark mode

Props

size

label

description

disabled

tsx

<Switch
  label="Dark mode"
/>

Examples

Sizes

tsx

<Switch size="sm" label="Small" />
<Switch size="default" label="Default" />
<Switch size="lg" label="Large" />

With description

tsx

<Switch
  label="Reduced motion"
  description="Disables every transition in the interface."
/>

States

tsx

<Switch label="Off" />
<Switch label="On" defaultChecked />
<Switch label="Disabled" disabled />
<Switch label="Disabled on" disabled defaultChecked />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Switch`

A checkbox under the hood, presented as a track and thumb.

Extends Omit<ComponentProps<'input'>, 'size' | 'type'>.

Prop	Type	Default	Description
size	'sm' \| 'default' \| 'lg'	'default'	Track and thumb size. Each step is proportioned so the thumb travels exactly its own width.
label	ReactNode	—	Text beside the track; makes the whole row clickable.
description	ReactNode	—	Secondary line under the label.
labelPosition	'start' \| 'end'	'end'	Which side the label sits on.
containerClassName	string	—	—

Functions

Function	Signature	Description
switchVariants	(props?: { size?: 'sm' \| 'default' \| 'lg' }) => string	A checkbox under the hood, presented as a track and thumb.