Inputs
Switch
A control for toggling between checked and unchecked.
import { Switch } from '@/components/Switch';
export const SwitchHero = () => ( <div className="flex justify-center"> <Switch /> </div>);Installation
- 1
Install dependencies:
npm install @radix-ui/react-switch tailwind-variants - 2
Add component:
Copy and paste the code into your project’s component directory. Do not forget to update the import paths.// Tremor Raw Switch [v0.0.0] import React from "react"import * as SwitchPrimitives from "@radix-ui/react-switch"import { tv, VariantProps } from "tailwind-variants" import { cx, focusRing } from "@/lib/utils" const switchVariants = tv({ slots: { root: [ // base "group relative isolate inline-flex shrink-0 cursor-pointer items-center rounded-full p-0.5 shadow-inner outline-none ring-1 ring-inset transition-all", "bg-gray-200 dark:bg-gray-950", // ring color "ring-black/5 dark:ring-gray-800", // checked "data-[state=checked]:bg-blue-500 data-[state=checked]:dark:bg-blue-500", // disabled "data-[disabled]:cursor-default", // disabled checked "data-[disabled]:data-[state=checked]:bg-blue-200", "data-[disabled]:data-[state=checked]:ring-gray-300", // disabled checked dark "data-[disabled]:data-[state=checked]:dark:ring-gray-900", "data-[disabled]:data-[state=checked]:dark:bg-blue-900", // disabled unchecked "data-[disabled]:data-[state=unchecked]:ring-gray-300", "data-[disabled]:data-[state=unchecked]:bg-gray-100", // disabled unchecked dark "data-[disabled]:data-[state=unchecked]:dark:ring-gray-700", "data-[disabled]:data-[state=unchecked]:dark:bg-gray-800", focusRing, ], thumb: [ // base "pointer-events-none relative inline-block transform appearance-none rounded-full border-none shadow-lg outline-none transition-all duration-150 ease-in-out focus:border-none focus:outline-none focus:outline-transparent", // background color "bg-white dark:bg-gray-50", // disabled "group-data-[disabled]:shadow-none", "group-data-[disabled]:bg-gray-50 group-data-[disabled]:dark:bg-gray-500", ], }, variants: { size: { default: { root: "h-5 w-9", thumb: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0", }, small: { root: "h-4 w-7", thumb: "h-3 w-3 data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0", }, }, }, defaultVariants: { size: "default", },}) interface SwitchProps extends Omit< React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, "asChild" >, VariantProps<typeof switchVariants> {} const Switch = React.forwardRef< React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(({ className, size, ...props }: SwitchProps, forwardedRef) => { const { root, thumb } = switchVariants({ size }) return ( <SwitchPrimitives.Root ref={forwardedRef} className={cx(root(), className)} {...props} > <SwitchPrimitives.Thumb className={cx(thumb())} /> </SwitchPrimitives.Root> )}) Switch.displayName = "Switch" export { Switch }
Example: With label
import { Switch } from '@/components/Switch';import { Label } from '@/components/Label';
export const SwitchDefaultExample = () => ( <div className="flex items-center justify-center gap-2"> <Switch id="r1" /> <Label htmlFor="r1">Show this purchase in my public profile.</Label> </div>);Example: DefaultChecked
import { Switch } from '@/components/Switch';import { Label } from '@/components/Label';
export const SwitchDefaultCheckedExample = () => ( <div className="flex items-center justify-center gap-2"> <Switch defaultChecked id="r2" /> <Label htmlFor="r2">Show this purchase in my public profile.</Label> </div>);Example: Switch sizes
import { Switch } from '@/components/Switch';import { Label } from '@/components/Label';
export const SwitchSizeExample = () => ( <div className="flex flex-col items-center justify-center gap-4"> <div className="flex items-center gap-2"> <Switch size="small" id="r4" /> <Label htmlFor="r4">Small</Label> </div> <div className="flex items-center gap-2"> <Switch size="default" id="r5" /> <Label htmlFor="r5">Default</Label> </div> </div>);Example: Disabled
import { Switch } from '@/components/Switch';import { Label } from '@/components/Label';
export const SwitchDisabledExample = () => ( <div className="flex flex-col gap-6"> <div className="flex items-center justify-center gap-2"> <Switch disabled id="r3" /> <Label disabled htmlFor="r3"> I'd like to be notified by SMS when my order is ready for collection. </Label> </div> <div className="flex items-center justify-center gap-2"> <Switch disabled checked id="r32" /> <Label disabled htmlFor="r32"> I'd like to be notified by SMS when my order is ready for collection. </Label> </div> </div>);Example: Controlled
Switch is:Off
import { Button } from "@/components/Button"import { Divider } from "@/components/Divider"import { Label } from "@/components/Label"import { Switch } from "@/components/Switch"
export const SwitchControlledExample = () => { const [checked, setChecked] = React.useState(false)
return ( <div className="space-y-4"> <form onSubmit={(event) => { event.preventDefault(), alert(`Submitted: ${checked}`) }} onReset={() => setChecked(false)} > <div className="flex items-center gap-3"> <Label htmlFor="a">Click the Label</Label> <Switch id="a" checked={checked} onCheckedChange={setChecked} /> </div> <Divider /> <div className="flex gap-4"> <Button type="submit" className="mt-2 w-fit"> Submit </Button>
<Button type="reset" variant="secondary" className="mt-2 w-fit"> Reset Input </Button> </div> </form> <p className="text-sm text-gray-500"> Switch is: <span className="ml-1 font-semibold text-gray-900 dark:text-gray-50"> {checked ? "On" : "Off"} </span> </p> </div> )}API Reference: Switch
This component uses the Radix UI API.
- variant
- Set a predefined size.
"default" | "small"
Default: "default"