nessra uinessra ui

Toggle Group

Previous: ToggleNext: Tooltip

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

Docs API Reference
Loading...
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/toggle-group.json

Usage

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
<ToggleGroup type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>

Examples

Outline

Loading...
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

Single Selection

Use type="single" for single selection mode.

Loading...
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from "lucide-react"

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

API Reference

ToggleGroup

PropTypeDefaultDescription
type"single" | "multiple"-Selection mode (required)
variant"default" | "outline""default"Visual style
size"default" | "sm" | "lg""default"Size of toggle items
spacingnumber0Gap between items

ToggleGroupItem

PropTypeDefaultDescription
valuestring-Unique value for the item
ToggleTooltip

On this page

InstallationUsageExamplesOutlineSingle SelectionAPI ReferenceToggleGroupToggleGroupItem