Glowup
ACTIONS · 15 / 89
ChipGroup
ChipGroup — a Material You actions component for React Native and web.
󱀫
packages/ui/src/components/ChipGroup.tsx
Live demo
Properties
4 controls
Multi select
Required
Wrap
Mode
Outlined
󰍝
Usage
ChipGroup.tsx
<ChipGroup />
Variants
The states and shapes this component is meant to be used in.
Single select
Required
The selected chip cannot be cleared.
Multi select
Scrolling row
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
10 on ChipGroupProps
Filter props
󰍉
onValueChange
required
(value: any) => void
options
required
ChipGroupOption[]
value
required
string | string[] | null
The selected value (or `null`), or the selected values with `multiSelect`.
accessibilityLabel
string
Names the group for assistive tech.
mode
"filled" | "tonal" | "outlined"
default: "outlined"
Chip look. Defaults to `"outlined"`, the M3 filter chip.
multiSelect
boolean
default: false
Filter chips: any number selected. Defaults to `false` (one at most).
required
boolean
default: false
Single select only: the selected chip cannot be deselected.
style
StyleProp<ViewStyle>
testID
string
wrap
boolean
default: true
`true` wraps onto more lines; `false` scrolls sideways. Defaults to `true`.
󰅁
Previous
Chip
Next
FAB
󰅂