Switch

Switch on Base UI whose thumb stretches on press then springs across, with sm and default sizes, a loading spinner state and an optional clickable label row.

src/registry/ui/switch.tsx/r/switch.json

Email notifications

Sent to billing@lumen.app

2 of 4 on

Invoice paidWhen a customer settles an invoice.Payment failedCard declines and bank returns, sent right away.Weekly revenue digestA Monday summary of MRR, churn and new customers.Deploy alertsProduction deploys in the Lumen workspace only.

Press and hold, then release

Off / on / loading / disabled

Installation#

bash

npx shadcn@latest add @minidev/switch

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/switch.json

Usage#

tsx

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

export function Example() {
  return (
    <Switch aria-label="Off" />
  )
}

API reference#

Switch props
Prop	Type	Default
`size`	`Size`	`"default"`
`loading`	`boolean`	`false`
`label`	`React.ReactNode`	`-`
`description`	`React.ReactNode`	`-`

Also accepts every prop of SwitchPrimitive.Root props, passed through to the root element.

Dependencies#

npm

@base-ui/reactlucide-reactmotion

Built from

No other MiniDev files

Examples#

SwitchToggle

AutocompleteText input that filters string options as you type, using ARIA combobox and listbox roles. Works controlled or uncontrolled and lists up to eight matches.Calendar MonthMonth calendar grid with weekday headers and clickable day cells that highlight the selected date. A simple Tailwind base for date views and schedulers.Character CountLive React character counter that shows the current count against a limit and turns red when it goes over. Announces changes politely to screen readers.Checkbox GroupVertical wrapper that groups related checkboxes under role group with even spacing. Use it with Checkbox and labels for multi select settings.CheckboxShadcn style checkbox on Base UI with an animated check, indeterminate state, invalid and disabled styles, and an enlarged hit area for touch.Chip FilterSingle select filter chips in React that behave as a radio group, with an accent ring on the active chip. Good for quick filters above lists and tables.

All form components

Learn more

Design a SaaS settings page that scalesGuide What is Controlled component?Glossary What is Micro-interactions?Glossary What is Toggle switch?Glossary