Docs
toggle
toggle
A two-state button that can be either on or off.
Installation
npx duck-ui@latest add toggle
npx duck-ui@latest add toggle
Usage
import { Toggle } from '@/components/ui/toggle'
import { Toggle } from '@/components/ui/toggle'
<Toggle>Toggle</Toggle>
<Toggle>Toggle</Toggle>
Examples
Default
Outline
With Text
Small
Large
Disabled
API Reference
Toggle
value
(string
, required): The value associated with the toggle input.variant
('default' | 'outline'
, optional, default:'default'
): Visual style variant of the toggle.size
('default' | 'sm' | 'lg'
, optional, default:'default'
): Size variant of the toggle.disabled
(boolean
, optional, default:false
): Disables the toggle if set totrue
....props
(React.HTMLProps<HTMLInputElement>
): Additional native input props forwarded to the hidden<input>
.
Behavior:
Renders a visually styled toggle switch wrapping a native checkbox <input>
(hidden and invisible). The toggle visually updates based on the input's checked and disabled states using CSS selectors. The component supports size and variant styling via toggleVariants
, which uses cva
for variant management.
toggleVariants
A variant style function built with cva
that defines CSS class names based on:
-
variant
:default
: Transparent background, text colors change on hover and checked states.outline
: Adds border, transparent background, changes colors on hover and when checked.
-
size
:default
: Height 40px (h-10), minimum width 40px (min-w-10), padding x 12px (px-3).sm
: Height 36px (h-9), min width 36px, padding x 10px.lg
: Height 44px (h-11), min width 44px, padding x 20px.
Includes hover, focus, checked, and disabled styling, as well as child SVG sizing and pointer events management.