Forms

Segmented

Toggle with a few options and an indicator that slides to the chosen one.

data-u="segmented"

Example

<div data-u="segmented" aria-label="Period">
  <button type="button">Day</button>
  <button type="button" aria-checked="true">Week</button>
  <button type="button">Month</button>
</div>
<div data-u="segmented" class="u-seg--flat" aria-label="View">
  <button type="button" aria-checked="true">Weekly</button>
  <button type="button">Monthly</button>
  <button type="button">Yearly</button>
</div>

Installation

Segmented ships in the full package, in unslop.css and unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

A ready-made block that uses segmented:

curl -fsSL unslop.leallabs.dev/i | sh -s add wall-controls

No build Name-based add is for charts and blocks. Components with JS live in unslop.js, which mounts every data-u on the page by itself.

Props

No props. The options are the child buttons and the initial one is the one with aria-checked="true".

Classes and variants

Class	What it does
`u-seg--flat`	On the host: flat version, without the sunken background.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
host	`role="radiogroup"`	Set by the JS. Give the host an `aria-label`.
buttons	`role="radio"`, `aria-checked`	The chosen one has `aria-checked="true"` and is the only one with tabindex 0.

Keyboard

Key	Does
Tab	enters the group, straight on the chosen option
Arrows	change the option and wrap around at the end

Events and API

Event	detail	When
`u:change`	`{ index, label }`	Only when the change comes from the user, not on mount.

Every event bubbles up the page. Listen on the element itself: el.addEventListener("u:change", (e) => e.detail).