Glowup
INPUTS · 28 / 89
Toggle
Toggle — a Material You inputs component for React Native and web.
󱀫
packages/ui/src/components/Toggle.tsx
Live demo
Properties
4 controls
Value
Width
Height
Disabled
Usage
Toggle.tsx
<Toggle value />
Variants
The states and shapes this component is meant to be used in.
Settings list
Email notifications
Push notifications
Weekly summary
On off disabled
Dark theme
Reduced motion
Audit logging (enforced)
Beta features (Enterprise only)
Sizes
Compact — 32 × 18 (default)
Standard — 48 × 28
Large — 64 × 36
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
7 on ToggleProps
onValueChange
required
(value: boolean) => void
value
required
boolean
containerStyle
StyleProp<ViewStyle>
default: {}
Style for the outer Pressable.
disabled
boolean
default: false
feedback
boolean
default: true
Report the switch to `ThemeProvider`'s `onInteractionFeedback` (haptics). Defaults to true.
height
number
default: 18
Track height; the thumb scales with it. Defaults to 18.
width
number
default: 32
Track width. Defaults to 32.
󰅁
Previous
RadioGroup
Next
Slider
󰅂