Toggle

A two-state button that can be either on or off.

Preview

Code

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/toggle

Anatomy

import { Toggle } from "~/components/ui/toggle";

<Toggle>Toggle</Toggle>;

Examples

Outline

Preview

Code

Small

Preview

Code

Large

Preview

Code

Disabled

Preview

Code

Custom Fill

Preview

Code

API Reference

Toggle

Prop	Type	Default
`variant`	`enum`	`"default"`
`size`	`enum`	`"default"`
`isSelected`	`boolean`
`defaultSelected`	`boolean`
`onChange`	`function`
`isDisabled`	`boolean`
`children`	`ReactNode`

Toggle Group Tooltip

On This Page

Installation
Anatomy
Examples
Outline
Small
Large
Disabled
Custom Fill
API Reference
Toggle

Contribute