Select row
One choice of several, as a row.
openvibe-shared/kitJSON
Build it
'<form class="ovk-form">' + kit.selectRow({ name: 'quality', label: 'Video quality', hint: 'Auto follows your connection', options: [['auto', 'Auto'], ['1080', '1080p'], ['720', '720p']], value: 'auto' }) + '</form>'Props
hint- string?
name- any
label- any
value- string?
options- list?
Anatomy
- selectRowOne choice of several, as a row.
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
- Select row
- Target
- At least 44 × 44 px on touch
- Focus
- Visible keyboard focus; follow reading order
States
- default
Tokens
color.bg.raisedsize.tap
Android · Jetpack Compose
Material 3 Select row
Use Select row in Jetpack Compose with the shared tokens.
iOS · SwiftUI
Use Select row in SwiftUI with the shared tokens.
Markup
Default
<form class="ovk-form"><label class="ovk-set-row"><span class="ovk-set-text">Video quality<small>Auto follows your connection</small></span><select name="quality"><option value="auto" selected>Auto</option><option value="1080">1080p</option><option value="720">720p</option></select></label></form>