Command Palette

Search for a command to run...

Toggle Group

shadcn/ui

A set of two-state buttons that can be toggled on or off.

Toggle Group

import { ToggleGroup, ToggleGroupItem } from "@/components/optics/toggle-group";import { Bold, Italic, Underline } from "lucide-react";<ToggleGroup type="multiple">  <ToggleGroupItem    aria-label="Toggle bold"    value="bold"  >    <Bold className="h-4 w-4" />  </ToggleGroupItem>  <ToggleGroupItem    aria-label="Toggle italic"    value="italic"  >    <Italic className="h-4 w-4" />  </ToggleGroupItem>  <ToggleGroupItem    aria-label="Toggle underline"    value="underline"  >    <Underline className="h-4 w-4" />  </ToggleGroupItem></ToggleGroup>

Installation

pnpm dlx shadcn@latest add @optics/toggle-group

Props

<ToggleGroup />
Name
Type
variant
string(default: default)
spacing
number(default: 0)
orientation
string(default: horizontal)
pressed
boolean
defaultPressed
boolean
onPressedChange
(...args) => void
nativeButton
boolean
render
React.ReactElement
onValueChange
(...args) => void
loopFocus
boolean

<ToggleGroupItem />
Name
Type
variant
string(default: default)
pressed
boolean
defaultPressed
boolean
onPressedChange
(...args) => void
nativeButton
boolean
render
React.ReactElement
onValueChange
(...args) => void
loopFocus
boolean
ToggleTooltip