Segmented

A single-select linear segmented control for light filtering / view switching, role="radiogroup", with per-item disabling. The selection indicator slides between items.

Basic usage

Basic usage

Example

Default selection

Controlled value

Example

Disabled items

Disabled options

Example

Sizes

size supports small / medium (default) / large, aligned with the input control size system (also follows the config-provider size injection):

Sizes

Example

Block

block stretches to the parent width with evenly divided items:

block

Example

Icon options

An option's icon field (oas-icons name) renders before the text; omitting label gives the icon-only form, where the icon name is converted to readable text as the aria-label fallback:

Icon options

Example

Icon only

Example

Vertical

direction="vertical" stacks items vertically (side toolbars and similar); keyboard navigation switches to ↑ / ↓ accordingly:

Vertical

Example

Read-only

readonly keeps the control focusable but the value cannot change (distinct form semantics from disabled):

readonly

Example

Custom option rendering

template[slot="option"] is cloned into each option (the element with data-option-label binds the option text, aligned with the select option slot convention):

option slot

Example

Keyboard & accessibility

Built on a hidden native radio group (input[type="radio"] grouped by name): Tab focuses the current selection, ← / → (vertical: ↑ / ↓) cycle through items skipping disabled ones, Home / End jump to the first / last item; focus (roving tabindex) follows the selection. Setting name names the inner radio group (an internal group name is generated when unset, so instances never interfere) — the component is not form-associated, so the radios in its shadow are not collected/submitted by an outer form; name is used only for intra-group exclusivity and keyboard semantics.

Switch event

oas-change event

Currently selected: chart

Example

API

oas-segmented

Attributes

Attribute	Description	Type	Default
block	Fill the parent width (options share equally)	—	—
direction	Orientation: horizontal (default) / vertical (mirrors aria-orientation and axis keys)	string	horizontal
disabled	Disables the whole segmented control (explicitly, or inherited from the config-provider global disabled injection)	boolean	—
name	Inner native radio group name (auto-generated unique name when unset, so instances do not clash); used only for intra-group exclusivity and keyboard semantics — the component is not form-associated, so the radios in its shadow are not collected/submitted by an outer form	string	—
options	[{ label, value, disabled? }] JSON string	string	[]
readonly	Read-only: focusable but selection immutable (radiogroup aria-readonly)	boolean	—
size	Size preset small / medium (default) / large	string	medium
value	Selected value (defaults to the first option; controlled)	string	—

Property (JS property; see each row for attribute reflection)

Property	Description	Type	Default
value	Current value: the selected option value string	string	—

Events

Event	Description
oas-change	Switched, detail: { value }

Slots

Name	Description
template[slot="option"]	Custom option template (<template slot="option">)

The container is role="radiogroup"; each item is backed by a native <input type="radio"> (the label itself has no role / aria-checked; checked state and accessible name come from the inner native radio, while the aria-disabled state attribute is kept).