Toggle Group

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

@react.component
let make = () =>
  <ToggleGroup variant=Outline multiple=true>

Installation


npx shadcn@latest add @rescript-shadcn/ToggleGroup

Usage

<ToggleGroup multiple=false>
  <ToggleGroup.Item value="a"> {"A"->React.string} </ToggleGroup.Item>
  <ToggleGroup.Item value="b"> {"B"->React.string} </ToggleGroup.Item>
  <ToggleGroup.Item value="c"> {"C"->React.string} </ToggleGroup.Item>
</ToggleGroup>

Examples

Outline

Use variant=Outline for an outline style.

@react.component
let make = () =>
  <ToggleGroup variant=Outline defaultValue={["all"]}>

Size

Use the size prop to change the size of the toggle group.

@react.component
let make = () =>
  <div className="flex flex-col gap-4">

Spacing

Use spacing to add spacing between toggle group items.

@react.component
let make = () =>
  <ToggleGroup size=ToggleGroup.Size.Sm defaultValue={["top"]} variant=Outline spacing=2.>

Vertical

Use orientation="vertical" for vertical toggle groups.

@react.component
let make = () =>
  <ToggleGroup

Disabled

@react.component
let make = () =>
  <ToggleGroup disabled={true}>

Custom

A custom toggle group example.

@@directive("'use client'")

@react.component

API Reference

See the Base UI Toggle Group documentation.