components segmented

components/segmented

Import: import { Segmented } from "@tundralibs/ui/segmented"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Segmented

Segmented(props: SegmentedProps): Html

A real radiogroup with visually-hidden inputs — it submits inside a form and works with no JS. Never rebuild this out of s.

To submit-on-change through rAPId, wrap it in a <form data-action data-target method="get">; the runtime intercepts the form's submit, not clicks on the radios (which it would cancel).

Types

SegmentedOption

Prop	Type	Required	Description
value	string	yes
label	string
icon	Html		Icon-only: ariaLabel then becomes required.
ariaLabel	string
disabled	boolean

SegmentedProps

Prop	Type	Required	Description
id	string	yes
name	string	yes
options	SegmentedOption[]	yes
value	string
size	`"sm"	"md"`
block	boolean
legend	string
inputAttrs	Attrs		Extra attributes on every radio, e.g. data-table-filter for filter.js or data-view-target for view-switch.js.
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

A status filter

A real radio group that submits under name; inputAttrs: { "data-table-filter": "" } wires it to the client-side filter.

Segmented({
  id: "status",
  name: "status",
  legend: "Status",
  value: "",
  options: [{ value: "", label: "All" }, { value: "open", label: "Open" }, { value: "paid", label: "Paid" }],
  inputAttrs: { "data-table-filter": "" },
})

<div class="segmented" role="radiogroup" id="status" data-segmented aria-label="Status">
  <span class="segmented__item">
    <input class="segmented__input" type="radio" id="status-0" name="status" value="" data-table-filter="" checked="">
    <label class="segmented__label" for="status-0">All</label>
  </span>
  <span class="segmented__item">
    <input class="segmented__input" type="radio" id="status-1" name="status" value="open" data-table-filter="">
    <label class="segmented__label" for="status-1">Open</label>
  </span>
  <span class="segmented__item">
    <input class="segmented__input" type="radio" id="status-2" name="status" value="paid" data-table-filter="">
    <label class="segmented__label" for="status-2">Paid</label>
  </span>
</div>

CSS hooks

Classes defined by components/segmented/segmented.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.js, .segmented, .segmented--block, .segmented--icon, .segmented--sm, .segmented__input, .segmented__item, .segmented__label

Behaviour

components/segmented/segmented.js ships in ui.js (delegated on document, re-initialised after a rAPId swap).

Attributes it reads or writes: data-segmented, data-segmented-ready.

Events: rapid:swapped.