Toggle group: Disabled

Disable one item, or the whole group with disabled. Disabled items are skipped by the keyboard.

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

export function ToggleGroupDisabled() {
  return (
    <div className="flex flex-col items-center gap-4">
      <ToggleGroup aria-label="Plan" defaultValue={["pro"]}>
        <ToggleGroupItem value="free">Free</ToggleGroupItem>
        <ToggleGroupItem value="pro">Pro</ToggleGroupItem>
        <ToggleGroupItem value="team" disabled>
          Team
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup
        disabled
        variant="outline"
        aria-label="Billing"
        defaultValue={["monthly"]}
      >
        <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
        <ToggleGroupItem value="yearly">Yearly</ToggleGroupItem>
      </ToggleGroup>
    </div>
  )
}

Add this example

This adds the example as components/examples/toggle-group/disabled.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-disabled.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
`defaultValue`	`string[]`	`–`
`variant`Sets every item's variant.	`"default" \| "outline"`	`"default"`
`disabled`	`boolean`	`false`

ToggleGroupItem

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

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.