Toggle group: Vertical

orientation="vertical" stacks the items and moves focus with ↑ and ↓.

import { IconLayoutGrid, IconLayoutList, IconList } from "@tabler/icons-react"

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

export function ToggleGroupVertical() {
  return (
    <ToggleGroup
      orientation="vertical"
      variant="outline"
      aria-label="Layout"
      defaultValue={["grid"]}
    >
      <ToggleGroupItem value="grid" aria-label="Grid">
        <IconLayoutGrid />
      </ToggleGroupItem>
      <ToggleGroupItem value="cards" aria-label="Cards">
        <IconLayoutList />
      </ToggleGroupItem>
      <ToggleGroupItem value="list" aria-label="List">
        <IconList />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Add this example

This adds the example as components/examples/toggle-group/vertical.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-vertical.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"`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`

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.