Toggle

Press switch and group. Pressed is ink; state lives in aria-pressed.

Install

npx raster add toggle

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 { Toggle, ToggleGroup } from "@/components/raster/toggle";

<Toggle pressed={bold} onPressedChange={setBold}>Bold</Toggle>

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

Classes

.rs-toggle.rs-toggle-group