1Sponsor

Toggle

Toggle/switch component with on/off labels

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/toggle.json

Usage

import { Toggle } from "@/components/ui/toggle";
<Toggle checked={enabled} onChange={setEnabled} label="Dark mode" />

API Reference

Toggle

PropTypeDefault
checkedbooleanundefined
onChange(checked: boolean) => voidundefined
labelstringundefined
onLabelstring"ON"
offLabelstring"OFF"
idstringundefined
disabledbooleanfalse
checkedIconstring"●"
uncheckedIconstring"○"
borderStyle"single" | "double" | "round" | "bold" | "singleDouble" | "doubleSingle" | "classic""round"
paddingXnumber1