Toggle Group

A set of two-state buttons that can be toggled on or off.

Saved preference for elorm init --ui-library base-ui
PreviewCode
"use client"

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

export function ToggleGroupDemo() {
  return (
    <ToggleGroup defaultValue={["left"]}>
      <ToggleGroupItem value="left">Left</ToggleGroupItem>
      <ToggleGroupItem value="center">Center</ToggleGroupItem>
      <ToggleGroupItem value="right">Right</ToggleGroupItem>
    </ToggleGroup>
  )
}

Installation#

Usage#

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

A set of two-state buttons that can be toggled on or off.