Toggle Group — uicraft

Multiple Select

Allows selecting multiple options simultaneously (e.g., text formatting).

html

<div class="uc-inline-flex uc-rounded-lg uc-border uc-p-1 uc-gap-1">
  <button class="uc-btn uc-btn-ghost uc-btn-sm" data-toggle-item="multiple"
    aria-pressed="false">
    <Bold class="uc-w-4 uc-h-4" />
  </button>
  <button class="uc-btn uc-btn-ghost uc-btn-sm" data-toggle-item="multiple"
    aria-pressed="false">
    <Italic class="uc-w-4 uc-h-4" />
  </button>
</div>

Single Select

Allows selecting only one option at a time (e.g., text alignment).

html

<div class="uc-inline-flex uc-rounded-lg uc-border uc-p-1 uc-gap-1">
  <button class="uc-btn uc-btn-ghost uc-btn-sm" data-toggle-item="single"
    data-group="align" data-state="on">
    <svg class="uc-w-4 uc-h-4"><!-- AlignLeft --></svg>
  </button>
  <button class="uc-btn uc-btn-ghost uc-btn-sm" data-toggle-item="single"
    data-group="align">
    <svg class="uc-w-4 uc-h-4"><!-- AlignCenter --></svg>
  </button>
</div>

With Labels

Toggle buttons with text labels for clarity.

html

<div class="uc-inline-flex uc-rounded-lg uc-border uc-p-1 uc-gap-1">
  <button class="uc-btn uc-btn-ghost uc-btn-sm uc-gap-1.5"
    data-toggle-item="single" data-group="view" data-state="on">
    <svg class="uc-w-4 uc-h-4"><!-- Grid --></svg>
    Grid
  </button>
  <button class="uc-btn uc-btn-ghost uc-btn-sm uc-gap-1.5"
    data-toggle-item="single" data-group="view">
    <svg class="uc-w-4 uc-h-4"><!-- List --></svg>
    List
  </button>
</div>

Disabled

Toggle group with individual items disabled.

html

<div class="uc-inline-flex uc-rounded-lg uc-border uc-p-1 uc-gap-1">
  <button class="uc-btn uc-btn-ghost uc-btn-sm"
    data-toggle-item="single" data-state="on">
    <svg class="uc-w-4 uc-h-4"><!-- List --></svg>
  </button>
  <button class="uc-btn uc-btn-ghost uc-btn-sm" disabled>
    <svg class="uc-w-4 uc-h-4"><!-- AlignJustify --></svg>
  </button>
</div>

API Reference

All CSS classes available for the Toggle Group component.

Class	Type	Description
`uc-inline-flex uc-rounded-lg uc-border uc-p-1 uc-gap-1`	Base	Container for toggle group with border and padding
`uc-border-border-default`	Style	Default border on the group container
`uc-bg-neutrals-surface`	Color	Surface background for the container
`uc-btn uc-btn-ghost uc-btn-sm`	Item	Ghost button style for each toggle item
`uc-px-3`	Size	Horizontal padding for toggle items
`uc-gap-1.5`	Modifier	Gap between icon and label in labeled toggles
`data-state="on"`	State	Active/pressed state via data attribute
`disabled`	State	HTML attribute to disable individual toggle items

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use role="group" with aria-label on the container
Toggle	Each toggle uses aria-pressed="true/false" for state
Keyboard	Tab moves to group, Arrow keys navigate items, Space/Enter toggle
Single select	For single-select, use role="radiogroup" with role="radio" on items