Switch
Switch makes it easy to toggle between two states.
'use client'import { Switch } from '@nerdfish/ui'export function SwitchExample() {return (<div className="flex h-full w-full items-center justify-center"><Switch /></div>)}
Usage
import { Switch } from '@nerdfish/ui'
<Switch id="sugar-on-cake" />
With Label
'use client'import { Label, Switch } from '@nerdfish/ui'export function SwitchWithLabelExample() {return (<div className="max-w-screen-xsm mx-auto w-full"><Label className="hover:bg-muted rounded-base gap-md p-md flex w-full cursor-pointer items-center justify-between"><span>Sugar on cake</span><Switch /></Label></div>)}
Variants
'use client'import { Label, Switch } from '@nerdfish/ui'export function SwitchVariantsExample() {return (<div className="max-w-screen-xsm gap-md mx-auto flex w-full flex-col"><Label className="hover:bg-muted rounded-base gap-md p-md flex w-full cursor-pointer items-center justify-between"><span>Info</span><Switch variant="info" /></Label><Label className="hover:bg-muted rounded-base gap-md p-md flex w-full cursor-pointer items-center justify-between"><span>Accent</span><Switch variant="accent" /></Label><Label className="hover:bg-muted rounded-base gap-md p-md flex w-full cursor-pointer items-center justify-between"><span>Danger</span><Switch variant="danger" /></Label><Label className="hover:bg-muted rounded-base gap-md p-md flex w-full cursor-pointer items-center justify-between"><span>Success</span><Switch variant="success" /></Label><Label className="hover:bg-muted rounded-base gap-md p-md flex w-full cursor-pointer items-center justify-between"><span>Warning</span><Switch variant="warning" /></Label></div>)}
Input Size
'use client'import { Label, Switch } from '@nerdfish/ui'export function SwitchInputSizeExample() {return (<div className="max-w-screen-xsm gap-md mx-auto flex w-full flex-col"><Label className="hover:bg-muted rounded-base gap-md p-md flex w-full cursor-pointer items-center justify-between"><span>Small</span><Switch inputSize="sm" /></Label><Label className="hover:bg-muted rounded-base gap-md p-md flex w-full cursor-pointer items-center justify-between"><span>Medium</span><Switch inputSize="md" /></Label><Label className="hover:bg-muted rounded-base gap-md p-md flex w-full cursor-pointer items-center justify-between"><span>Large</span><Switch inputSize="lg" /></Label><Label className="hover:bg-muted rounded-base gap-md p-md flex w-full cursor-pointer items-center justify-between"><span>XLarge</span><Switch inputSize="xl" /></Label></div>)}