saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Switch

Switch

A control that allows the user to toggle between checked and not checked.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/switch

Usage

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

Examples

Disabled

Loading...
Disabled state.

Sizes

Loading...
Size variants.

API Reference

PropTypeDefaultDescription
checkedboolean—The controlled checked state.
defaultCheckedboolean—The default checked state.
onCheckedChange(checked: boolean) => void—Event handler for state changes.

On This Page

  • Installation
  • Usage
  • Examples
  • Disabled
  • Sizes
  • API Reference