Segmented Control
A single-choice selector in a pill shape, where each segment is an option and an indicator slides behind the selected one. Use it when there are a few mutually exclusive options (2 to 5) and you want all of them visible at once, such as switching between "Day/Week/Month". It is agent-native: the host mirrors machine-readable state in data-value, data-active-index, and data-count, and each segment exposes data-value, data-index, and data-active, allowing agents to read and locate the selection without inspecting the shadow DOM.
Preview
<pura-segmented-control
id="periodo"
label="Period"
options="Day,Week,Month"
value="Week"
></pura-segmented-control>
<p id="periodo-saida">Selected: Week</p>
<script type="module">
import "/pura/lib/segmented-control.js";
const sc = document.getElementById("periodo");
const out = document.getElementById("periodo-saida");
sc.addEventListener("change", (e) => {
out.textContent = "Selected: " + e.detail.value;
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
options | string | — | Comma-separated list of segment labels (e.g., "Day,Week,Month"). Spaces are trimmed and empty items are ignored. |
value | string | first option | Label of the currently selected option. If absent or not present in options, it defaults to the first option. |
disabled | boolean | false | Disables the entire control (no focus, no clicks). |
size | string | md | Size of the control: sm | md | lg. Purely presentational. |
label | string | Segmented control | aria-label text for the radiogroup, for accessibility. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/segmented-control.js"></script>import "./pura/lib/segmented-control.js";