fetaUI
GitHub

Switch

Turns a setting on or off and applies it at once.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/switch
Playground
States
Settings
Choice card
Focus mode
Permissions
Permissions3 of 4
Notifications
Alerts and badges
Calendar
Read your events
Contacts
Find people you know
Security keys
Required by your workspace
Invalid
Before you start
Icons animation
Invalid
Disabled
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/switch

Settings

A settings row. A click anywhere on the row toggles it.

Invalid
Disabled
Motion

Accessibility

  • Role switch with aria-checked and a visible label.
  • The thumb position carries the state, not only colour.

Motion

  • The thumb stretches 6 px under the finger and springs across at 500/30.
  • Hover adds a halo. Invalid shakes 2 px once.
  • With reduced motion, the thumb moves at once.

Responsive behavior

  • 36 by 20 px on Web and 46 by 28 px on Mobile.

Performance

  • The thumb moves with Motion layout, so it animates on transform. Layout is off when still.
  • The halo and glint are CSS.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import Switch and SwitchField from @/components/fetaui/switch. A bare Switch needs an aria-label.
  • It is a button with role switch, so it does not post in a form. Read onCheckedChange.
  • Use it for settings that apply at once. If a Save button follows, use Checkbox.
  • The demo saves nothing. The state lives in the component or in local state.
/docs/components/switch/markdown
PreviousRadio Group
NextSlider

Related

CheckboxComponentToggles between checked and not checked, with an indeterminate value for parents of a list.ToggleComponentA button that stays pressed.FieldComponentLabel, control and help text as one unit, so they read, validate and announce together.FieldsetComponentFields grouped under a legend, in an inset card on the tray.Radio GroupComponentPick exactly one. A surface circle that fills to an ink disc with a dot.