Toggle Group

import { AlignCenter, AlignJustify, AlignLeft, AlignRight } from "lucide-react"

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

When to use it#

A toggle group is for a small set of related options that you want to see all at once: a text alignment, a time range, a handful of filters. Pick it over a select when there are only a few choices and the buttons fit comfortably in a row.

Import#

The items in a group are regular toggles, re-exported under a name that keeps the import in one line.

Copyimport { ToggleGroup, ToggleGroupItem } from "@hel/ui/toggle-group"

Examples#

Pick one#

By default only one item can be pressed. Pressing another one releases the first. The value is always an array, even when it holds a single item, so keep that in mind when you control it.

import * as React from "react"

import { Stack } from "@hel/ui/stack"

Pick several#

Add multiple and any number of items can be on at the same time.

import { Bold, Italic, Underline } from "lucide-react"

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

Spaced filters#

Without attached, the items stay separate and keep their own corners. This suits labels of different lengths, like filters above a list.

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

export function ToggleGroupFilters() {

Vertical#

Set orientation="vertical" to stack the items. An attached group rounds only the top and the bottom.

import { Eraser, MousePointer2, Pencil } from "lucide-react"

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

Attached or spaced#

attached joins the items into one strip with shared edges and rounded ends. It looks best with variant="outline". Leave it off and the items sit a few pixels apart instead.

Variants, sizes and disabled#

Set variant and size once on the group and every item follows. An item can still set its own. To lock the whole group, use disabled on the group. To lock one option, use it on that item.

Props#

ToggleGroup#

Give the group an aria-label so assistive technology can announce what the options are for.

ToggleGroupItem#

Each item needs a value. It takes the same props as Toggle, including leadingIcon, pressedIcon and disabled.

ToggleGroup also takes every prop of the Base UI toggle group.