Glowup
ACTIONS · 20 / 89
ToggleButtonGroup
ToggleButtonGroup — a Material You actions component for React Native and web.
󱀫
packages/ui/src/components/ToggleButton/ToggleButtonGroup.tsx
Live demo
Properties
1 control
Value
Usage
ToggleButtonGroup.tsx
<ToggleButtonGroup value="list" />
Variants
The states and shapes this component is meant to be used in.
View mode
Layout
Labels only
Report period
Icons only
Alignment
Multi select
Text style
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
10 on ToggleButtonGroupProps
Filter props
󰍉
onValueChange
required
(val: any) => void
options
required
ToggleButtonOption[]
value
required
string | string[]
accessibilityLabel
string
Names the group for assistive tech — a group of choices needs a question.
disabled
boolean
default: false
Disables every segment.
feedback
boolean
default: true
Report each press (a toggle with `multiSelect`, else a selection) to `ThemeProvider`'s `onInteractionFeedback` (haptics). Defaults to true.
fullWidth
boolean
default: false
Segments share the row equally instead of sizing to their labels.
multiSelect
boolean
default: false
showSelectedCheck
boolean
default: false
Show a check mark on the selected segments (M3 segmented button).
style
StyleProp<ViewStyle>
󰅁
Previous
ToggleButton
Next
ButtonGroup
󰅂