Switch
Create accessible toggle switches for on/off states with smooth animations across all platforms.
Preview
Interactive Demo
Installation
npm install @native-ui-org/primitives
pnpm add @native-ui-org/primitives
yarn add @native-ui-org/primitives
bun add @native-ui-org/primitives
Overview
Switch is a toggle component for binary on/off states with native-feeling animations.
| Feature | Description | Platforms |
|---|---|---|
| Switch | Animated toggle for boolean state | iOS, Android, Web |
Setup & Usage Guide
Switch provides the foundation for toggle controls with full styling control.
1. Install and Import
Install from npm:
npm install @native-ui-org/primitivesThen import from the package:
import { Switch } from "@native-ui-org/primitives";2. Basic Usage (Uncontrolled)
Let the component manage its own state:
<Switch defaultChecked={false}>
{({ checked }) => (
<View style={checked ? styles.switchOn : styles.switchOff}>
<View style={[styles.thumb, checked && styles.thumbOn]} />
</View>
)}
</Switch>3. Controlled State
Manage switch state externally:
const [enabled, setEnabled] = useState(false);
<Switch checked={enabled} onCheckedChange={setEnabled}>
{({ checked }) => (
<View style={checked ? styles.on : styles.off}>
<View style={styles.thumb} />
</View>
)}
</Switch>4. With Label
<View style={styles.row}>
<Text>Enable notifications</Text>
<Switch checked={notifications} onCheckedChange={setNotifications}>
{({ checked }) => (
<View style={checked ? styles.on : styles.off}>
<View style={styles.thumb} />
</View>
)}
</Switch>
</View>5. Disabled State
<Switch disabled checked={true}>
{({ checked }) => (
<View style={styles.disabled}>
<View style={styles.thumb} />
</View>
)}
</Switch>API Reference
Switch
Toggle component for boolean states.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled checked state |
defaultChecked | boolean | false | Initial state (uncontrolled) |
onCheckedChange | (checked: boolean) => void | — | Callback when state changes |
disabled | boolean | false | Disable interactions |
required | boolean | false | Mark as required (forms) |
name | string | — | Form field name |
value | string | "on" | Form value when checked |
children | function | React.ReactNode | — | Render function or static content |
Platform Behavior
| Platform | Implementation | Characteristics |
|---|---|---|
| iOS / Android | Animated View components | Native 60fps animations |
| Web | Button with animated state | Keyboard accessible |
| All Platforms | Consistent API | Same props, same behavior |
Accessibility
Web:
role="switch"aria-checkedreflects state- Keyboard support (Space to toggle)
- Focus management
Mobile:
- Accessibility role "switch"
- State announced to screen readers
- Works with VoiceOver and TalkBack
Version History
| Version | Notes |
|---|---|
0.1.0 | Initial release — switch with controlled/uncontrolled states and animations. |
Summary: Switch provides accessible toggle controls for boolean states. Use it for settings, feature toggles, or any on/off control. Supports both controlled and uncontrolled modes with proper accessibility.