Segmented control

<oblyx-segmented-control> is a form control, not navigation: a small set of mutually exclusive choices shown side by side. It looks like a tab strip, but it means something different: one selected value from a closed set that participates in form submission, not "which panel of content is currently showing." Use tabs when switching between panels of content; use this when the choice is a value.

Every item is a real <input type="radio">, so the group gets one tab stop, arrow keys that move between options and select as they go, and native FormData participation, all from the browser, with no keyboard handling or ARIA role written by hand.

Basic segmented control

List

Grid

Board

HTML

Kotlin

<oblyx-segmented-control label="View">
  <oblyx-segmented-item value="list">List</oblyx-segmented-item>
  <oblyx-segmented-item value="grid">Grid</oblyx-segmented-item>
  <oblyx-segmented-item value="board">Board</oblyx-segmented-item>
</oblyx-segmented-control>

oblyxSegmentedControl(label = "View") {
  oblyxSegmentedItem(value = "list") { +"List" }
  oblyxSegmentedItem(value = "grid") { +"Grid" }
  oblyxSegmentedItem(value = "board") { +"Board" }
}

Pre-selected value

value on oblyx-segmented-control is the single source of truth for which item is selected; set it up front to pre-select an item.

Segmented control with a pre-selected value

List

Grid

Board

HTML

Kotlin

<oblyx-segmented-control label="View" value="grid">
  <oblyx-segmented-item value="list">List</oblyx-segmented-item>
  <oblyx-segmented-item value="grid">Grid</oblyx-segmented-item>
  <oblyx-segmented-item value="board">Board</oblyx-segmented-item>
</oblyx-segmented-control>

oblyxSegmentedControl(label = "View", value = "grid") {
  oblyxSegmentedItem(value = "list") { +"List" }
  oblyxSegmentedItem(value = "grid") { +"Grid" }
  oblyxSegmentedItem(value = "board") { +"Board" }
}

Icons

There is no separate icon attribute. An item's content is whatever markup you put inside it, icon included, the same convention oblyx-button uses.

Segmented control with icons

Today

Upcoming

HTML

Kotlin

<oblyx-segmented-control label="Schedule">
  <oblyx-segmented-item value="today"><oblyx-icon name="calendar"></oblyx-icon>Today</oblyx-segmented-item>
  <oblyx-segmented-item value="upcoming"><oblyx-icon name="clock"></oblyx-icon>Upcoming</oblyx-segmented-item>
</oblyx-segmented-control>

oblyxSegmentedControl(label = "Schedule") {
  oblyxSegmentedItem(value = "today") {
    oblyxIcon(name = OblyxIconName.CALENDAR)
    +"Today"
  }
  oblyxSegmentedItem(value = "upcoming") {
    oblyxIcon(name = OblyxIconName.CLOCK)
    +"Upcoming"
  }
}

Sizes

size takes OblyxElementSize, shared with button, input and other components with a comparable control height. It lives only on the control; items have no size attribute of their own.

Segmented control sizes

Option A

Option B

Option A

Option B

Option A

Option B

HTML

Kotlin

<oblyx-segmented-control label="Small" size="sm">
  <oblyx-segmented-item value="a">Option A</oblyx-segmented-item>
  <oblyx-segmented-item value="b">Option B</oblyx-segmented-item>
</oblyx-segmented-control>
<oblyx-segmented-control label="Medium" size="md">
  <oblyx-segmented-item value="a">Option A</oblyx-segmented-item>
  <oblyx-segmented-item value="b">Option B</oblyx-segmented-item>
</oblyx-segmented-control>
<oblyx-segmented-control label="Large" size="lg">
  <oblyx-segmented-item value="a">Option A</oblyx-segmented-item>
  <oblyx-segmented-item value="b">Option B</oblyx-segmented-item>
</oblyx-segmented-control>

oblyxSegmentedControl(label = "Small", size = OblyxElementSize.SM) {
  oblyxSegmentedItem(value = "a") { +"Option A" }
  oblyxSegmentedItem(value = "b") { +"Option B" }
}
oblyxSegmentedControl(label = "Medium", size = OblyxElementSize.MD) {
  oblyxSegmentedItem(value = "a") { +"Option A" }
  oblyxSegmentedItem(value = "b") { +"Option B" }
}
oblyxSegmentedControl(label = "Large", size = OblyxElementSize.LG) {
  oblyxSegmentedItem(value = "a") { +"Option A" }
  oblyxSegmentedItem(value = "b") { +"Option B" }
}

Disabled item

Disabling one item never affects its siblings. A disabled item is excluded from keyboard roving and from FormData if it were ever the selected one.

Segmented control with a disabled item

Free

Pro

Enterprise

HTML

Kotlin

<oblyx-segmented-control label="Plan" value="pro">
  <oblyx-segmented-item value="free">Free</oblyx-segmented-item>
  <oblyx-segmented-item value="pro">Pro</oblyx-segmented-item>
  <oblyx-segmented-item value="enterprise" disabled>Enterprise</oblyx-segmented-item>
</oblyx-segmented-control>

oblyxSegmentedControl(label = "Plan", value = "pro") {
  oblyxSegmentedItem(value = "free") { +"Free" }
  oblyxSegmentedItem(value = "pro") { +"Pro" }
  oblyxSegmentedItem(value = "enterprise", disabled = true) { +"Enterprise" }
}

Disabled group

disabled on oblyx-segmented-control disables every item natively, via a real <fieldset disabled>, so no JavaScript is forwarded to the items for this.

Disabled segmented control

List

Grid

HTML

Kotlin

<oblyx-segmented-control label="View" value="list" disabled>
  <oblyx-segmented-item value="list">List</oblyx-segmented-item>
  <oblyx-segmented-item value="grid">Grid</oblyx-segmented-item>
</oblyx-segmented-control>

oblyxSegmentedControl(label = "View", value = "list", disabled = true) {
  oblyxSegmentedItem(value = "list") { +"List" }
  oblyxSegmentedItem(value = "grid") { +"Grid" }
}

Error

Setting error sets aria-invalid="true" on the group and renders the message below it. This is purely informational and does not call setCustomValidity.

Segmented control with error

Monthly

Yearly

HTML

Kotlin

<oblyx-segmented-control label="Billing period" error="Choose a billing period to continue.">
  <oblyx-segmented-item value="monthly">Monthly</oblyx-segmented-item>
  <oblyx-segmented-item value="yearly">Yearly</oblyx-segmented-item>
</oblyx-segmented-control>

oblyxSegmentedControl(label = "Billing period", error = "Choose a billing period to continue.") {
  oblyxSegmentedItem(value = "monthly") { +"Monthly" }
  oblyxSegmentedItem(value = "yearly") { +"Yearly" }
}

Form submission

name on oblyx-segmented-control is what makes the selected value appear in FormData under that key. When name is left unset, items still share a generated fallback name so the group behaves as one native radio group either way. Only FormData submission actually depends on an author-chosen name.

Segmented control inside a form

Switch the period and submit to see it appear in FormData.

HTML

Kotlin

<form onsubmit="event.preventDefault(); const data = new FormData(this); this.querySelector('output').textContent = 'period = ' + data.get('period');">
  <oblyx-segmented-control label="Billing period" name="period" value="monthly">
    <oblyx-segmented-item value="monthly">Monthly</oblyx-segmented-item>
    <oblyx-segmented-item value="yearly">Yearly</oblyx-segmented-item>
  </oblyx-segmented-control>
  <button type="submit">Continue</button>
  <output></output>
</form>

form {
  oblyxSegmentedControl(label = "Billing period", name = "period", value = "monthly") {
    oblyxSegmentedItem(value = "monthly") { +"Monthly" }
    oblyxSegmentedItem(value = "yearly") { +"Yearly" }
  }
  button(type = ButtonType.submit) { +"Continue" }
}

Reference

`<oblyx-segmented-control>`

Attribute	Type	Default	Description
`label`	`string \| undefined`	–	Group label, rendered as a real `<legend>`: the group's accessible name via native `<fieldset>`/`<legend>` semantics, no `aria-*` wiring needed. Required for an accessible name; omitting it is a defect and is flagged loudly rather than silently producing an unlabeled group.
`help`	`string \| undefined`	–	Help text, rendered under the group and wired into `aria-describedby`.
`error`	`string \| undefined`	–	Error message. Presence alone puts the group in its error state (`aria-invalid="true"`) and, when non-empty, renders the message wired into `aria-describedby`, same contract as every other Oblyx form control.
`size`	`smmdlg`	`md`	Item height, from the shared size scale used across Oblyx form controls. Pure CSS: every item's own height follows this reflected attribute, so no JavaScript is forwarded to items.
`name`	`string \| undefined`	–	Forwarded to every item's native `<input name>` when set. When left unset, items still share a generated fallback name so the group behaves as one native radio group, keyboard roving and mutual exclusion included, but that fallback name is never submitted: only an author-chosen `name` makes the selected value appear in FormData.
`value`	`string \| undefined`	–	The selected item's `value`, the single source of truth for selection: reflected so `oblyx-segmented-control[value="…"]` is a CSS hook and so an author can pre-select an item with a plain attribute. Starts `undefined` (nothing selected) until an initial value or a `change` from one of the items sets it.
`disabled`	`boolean`	`false`	Disables every item natively: setting the real `<fieldset disabled>` attribute disables every native input nested inside it, including each item's own. No JavaScript is forwarded to items for this.

`<oblyx-segmented-item>`

Attribute	Type	Default	Description
`value`	`string \| undefined`	–	The value this item contributes when selected. Required, like a native `<input type="radio" value>`; missing it is a defect and is flagged loudly rather than silently producing an item that can never be selected.
`disabled`	`boolean`	`false`	Disables just this item, forwarded verbatim to the native `<input>`. Disabling the whole group is a separate, native concern; see `<oblyx-segmented-control>`'s `disabled` property. This attribute never affects sibling items.
`checked`	`boolean`	`false`	Whether this is the currently selected item. Driven by the parent `<oblyx-segmented-control>` for the one item whose `value` matches the group's current `value`. Reflected so `oblyx-segmented-item[checked]` is a CSS hook, and so an author can pre-check a standalone item (one with no enclosing control) the same way a native `<input type="radio" checked>` works.