Toggle group: Outline

variant="outline" joins the items into one bordered control.

import {
  IconAlignCenter,
  IconAlignJustified,
  IconAlignLeft,
  IconAlignRight,
} from "@tabler/icons-react"

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

export function ToggleGroupOutline() {
  return (
    <ToggleGroup
      variant="outline"
      aria-label="Text alignment"
      defaultValue={["left"]}
    >
      <ToggleGroupItem value="left" aria-label="Align left">
        <IconAlignLeft />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        <IconAlignCenter />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        <IconAlignRight />
      </ToggleGroupItem>
      <ToggleGroupItem value="justify" aria-label="Justify">
        <IconAlignJustified />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Add this example

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

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.