Toggle group: Controlled

Pass value and onValueChange. Ignoring the empty value keeps one item on, so pressing the picked item again does nothing.

Showing the Board view.

"use client"

import * as React from "react"

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

const views = ["Board", "List", "Calendar"]

export function ToggleGroupControlled() {
  const [view, setView] = React.useState("Board")

  return (
    <div className="flex flex-col items-center gap-3">
      <ToggleGroup
        variant="outline"
        aria-label="View"
        value={[view]}
        onValueChange={(value) => {
          if (value.length > 0) {
            setView(value[0])
          }
        }}
      >
        {views.map((item) => (
          <ToggleGroupItem key={item} value={item}>
            {item}
          </ToggleGroupItem>
        ))}
      </ToggleGroup>
      <p className="text-sm text-muted-foreground">Showing the {view} view.</p>
    </div>
  )
}

Add this example

This adds the example as components/examples/toggle-group/controlled.tsx, together with the Toggle group component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/toggle-group-controlled.json

To add only the component, follow the Toggle group installation.

Props in this example

The Toggle group props this example sets, from the API reference.

ToggleGroup

Prop	Type	Default
`value`	`string[]`	`–`
`onValueChange`	`(value: string[], details) => void`	`–`
`variant`Sets every item's variant.	`"default" \| "outline"`	`"default"`

ToggleGroupItem

Prop	Type	Default
`value`Identifies the item in the group's value.	`string`	`–`

Every prop is in the Toggle group API reference.

More Toggle group examples

See them all, with keyboard support and accessibility notes, on the Toggle group page.