Toggle

Toggle button with pressed state, single and multiple selection groups, and accessible aria-pressed support.

Preview

Installation

npx drivn add toggle

Usage

1 import { Toggle } from "@/components/ui/toggle"
2 import { Bold } from "lucide-react"
3 
4 export default function Page() {
5   return (
6     <Toggle>
7       <Bold className="h-4 w-4" />
8       Bold
9     </Toggle>
10   )
11 }

Outline Variant

Border style for a more defined appearance.

Sizes

Three sizes: sm, md, and lg.

Single Selection

Radio-like toolbar — only one toggle active at a time, press again to deselect.

Multiple Selection

Checkbox-like toolbar — toggle items independently.

Disabled

Disable individual toggles or the entire group.

Vertical

Stack toggles vertically with orientation.

API Reference

Toggle

Prop	Type	Default	Description
`pressed`	boolean	—	Controlled pressed state
`defaultPressed`	boolean	false	Initial pressed state (uncontrolled)
`onChange`	(pressed: boolean) => void	—	Callback fired when pressed state changes
`value`	string	—	Item value when used inside Toggle.Group
`variant`	"default" \| "outline"	"default"	Visual style variant
`size`	"sm" \| "md" \| "lg"	"md"	Toggle size
`disabled`	boolean	false	Disables the toggle
`className`	string	—	Additional CSS classes
`...props`	ButtonHTMLAttributes<HTMLButtonElement>	—	All standard HTML button attributes are supported

Toggle.Group

Prop	Type	Default	Description
`type`	"single" \| "multiple"	—	Selection mode — single allows one active toggle, multiple allows many
`defaultValue`	string \| string[]	—	Initial value (uncontrolled)
`value`	string \| string[]	—	Current value (controlled)
`onValueChange`	(value: string \| string[]) => void	—	Callback fired when the value changes
`orientation`	"horizontal" \| "vertical"	"horizontal"	Layout direction of the group
`disabled`	boolean	false	Disables all toggles in the group
`className`	string	—	Additional CSS classes for the group wrapper

1	import { Toggle } from "@/components/ui/toggle"
2	import { Bold } from "lucide-react"
3
4	export default function Page() {
5	return (
6	<Toggle>
7	<Bold className="h-4 w-4" />
8	Bold
9	</Toggle>
10	)
11	}