Segmented

Two to four choices you can see at once.

openvibe-shared/kitJSON

Build it

kit.seg({ name: 'view', label: 'View', options: [['grid', 'Grid'], ['list', 'List'], ['map', 'Map']], value: 'grid' })

Props

name: any
label: string?
value: string?
options: list?

Anatomy

segTwo to four choices you can see at once.

Behaviour and access

Keyboard: Keeps the focused control in view
Outside tap: Leaves it open
Scroll: The page still scrolls
Reduced motion: Remove movement; keep the state change.
Name: Segmented
Target: At least 44 × 44 px on touch
Focus: Visible keyboard focus; follow reading order

States

default
selected
focused

Tokens

color.bg.raised
size.tap

Android · Jetpack Compose

SingleChoiceSegmentedButtonRow

Use SingleChoiceSegmentedButtonRow with SegmentedButton items, or a radio row when space is tight.

iOS · SwiftUI

Use Picker with .segmented style.

Markup

Default

<div class="ovk-set-row"><span class="ovk-set-text" id="ovk-seg-view">View</span><span class="ovk-seg" role="radiogroup" aria-labelledby="ovk-seg-view"><label><input type="radio" name="view" value="grid" checked><span>Grid</span></label><label><input type="radio" name="view" value="list"><span>List</span></label><label><input type="radio" name="view" value="map"><span>Map</span></label></span></div>