Chips
Filters you can turn on and off, or one of a few.
openvibe-shared/kitJSON
Build it
kit.chips({ name: 'kind', label: 'Show', options: [['live', 'Live', true], ['clips', 'Clips', true], ['rooms', 'Rooms'], ['games', 'Games']] })Props
name- any
label- string?
single- boolean?
options- list?
Anatomy
- chipsFilters you can turn on and off, or one of a few.
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
- Chips
- 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 Chips
Use Chips in Jetpack Compose with the shared tokens.
iOS · SwiftUI
Use Chips in SwiftUI with the shared tokens.
Markup
Default
<div class="ovk-set-row ovk-set-chips"><span class="ovk-set-text">Show</span><span class="ovk-chips"><label class="ovk-chip"><input type="checkbox" name="kind_live" value="1" checked><span>Live</span></label><label class="ovk-chip"><input type="checkbox" name="kind_clips" value="1" checked><span>Clips</span></label><label class="ovk-chip"><input type="checkbox" name="kind_rooms" value="1"><span>Rooms</span></label><label class="ovk-chip"><input type="checkbox" name="kind_games" value="1"><span>Games</span></label></span></div>