Segmented, full width
Three or four equal choices filling the row, each with an icon; the radios post without JavaScript.
openvibe-shared/kitJSON
Build it
kit.segmented({ name: 'kind', ariaLabel: 'What to paste', value: 'text', items: [{ value: 'text', label: 'Text', icon: 'page' }, { value: 'code', label: 'Code', icon: 'code' }, { value: 'link', label: 'Link', icon: 'link' }] })Props
name- any
items- list?
label- string?
value- string?
ariaLabel- string?
Anatomy
- segmentedThree or four equal choices filling the row, each with an icon; the radios post without JavaScript.
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, full width
- Target
- At least 44 × 44 px on touch
- Focus
- Visible keyboard focus; follow reading order
States
- default
- selected
- focused
Tokens
color.bg.raisedsize.tap
Android · Jetpack Compose
SingleChoiceSegmentedButtonRow
Use SingleChoiceSegmentedButtonRow with SegmentedButton items; the selected one is the current value.
iOS · SwiftUI
Use Picker with .segmented style; announce the selected value.
Markup
Default
<span class="ovk-seg ovk-seg--fill" role="radiogroup" aria-label="What to paste"><label class="ovk-seg-item"><input type="radio" name="kind" value="text" checked><span>Text</span></label><label class="ovk-seg-item"><input type="radio" name="kind" value="code"><span><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m8 8-4 4 4 4M16 8l4 4-4 4M14 5l-4 14"/></svg>Code</span></label><label class="ovk-seg-item"><input type="radio" name="kind" value="link"><span><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg>Link</span></label></span>