Toggle group

One pressed at a time. Joined hairlines.

Set

Flush

One alignment. The group is one object.

Install

npx @noordvc/raster-cli add toggle-group

Markup

<div class="rs-toggle-group"><button class="rs-toggle" aria-pressed="true">Left</button><button class="rs-toggle" aria-pressed="false">Center</button><button class="rs-toggle" aria-pressed="false">Right</button></div>

React

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

<ToggleGroup
  options={[
    { value: "left", label: "Left" },
    { value: "center", label: "Center" },
    { value: "right", label: "Right" },
  ]}
  value={align}
  onValueChange={setAlign}
/>

Classes

.rs-toggle-group

Depends on

/toggle