Railbase
GPTClaude

Toggle Group

A set of toggles where one or several can be active.

Updated

Multiple
<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold">B</ToggleGroupItem>
  <ToggleGroupItem value="italic">I</ToggleGroupItem>
  <ToggleGroupItem value="underline">U</ToggleGroupItem>
</ToggleGroup>

A set of toggles where one or several can be active.

Installation

railbase ui add toggle-group

Peer dependencies:

npm install class-variance-authority

Note

railbase ui add also copies the toggle component and shared primitives — they ship alongside this component automatically.

Usage

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

<ToggleGroup type="single">
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

Anatomy

Exported parts: ToggleGroup · ToggleGroupItem

← PreviousToggleNext →Tooltip