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>
)
}