Docs
Toggle Group

Toggle Group

Toggle Group component is a collection of two-state buttons that can be toggled on or off. It provides a cohesive set of controls for users to choose between different options within a single group. The Toggle Group component is especially useful when you want users to select one option from a set of mutually exclusive choices. It enhances the user experience by offering a clear and visually coherent way to manage and indicate the selected state within a group of related toggles.

Installation

yarn add @camped-ui/toggle-group

Usage

import { ToggleGroup, ToggleGroupItem } from "@camped-ui/toggle-group";
<ToggleGroup type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>

Examples

Default

Outline

Single

Small

Large

Disabled