Introduction
Components
- Accordion
- Action Sheet
- Alert
- Audio Player
- Audio Recorder
- Audio Waveform
- Avatar
- AvoidKeyboard
- Badge
- BottomSheet
- Button
- Camera
- Camera Preview
- Card
- Carousel
- Checkbox
- Collapsible
- Color Picker
- Combobox
- Date Picker
- File Picker
- Gallery
- Hello Wave
- Icon
- Image
- Input
- Input OTP
- Link
- MediaPicker
- Mode Toggle
- Onboarding
- ParallaxScrollView
- Picker
- Popover
- Progress
- Radio
- ScrollView
- SearchBar
- Separator
- Share
- Sheet
- Skeleton
- Spinner
- Switch
- Table
- Tabs
- Text
- Toast
- Toggle
- Video
- View
Charts
Installation
pnpm dlx bna-ui add switch
Usage
import { Switch } from '@/components/ui/switch';<Switch
label='Enable notifications'
value={isEnabled}
onValueChange={setIsEnabled}
/>Examples
Default
Without Label
With Error State
Disabled State
Settings List
Custom Colors
API Reference
Switch
A toggle switch component with optional label and error states.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Optional label text for the switch. |
error | string | - | Error message to display (changes label color). |
labelStyle | TextStyle | - | Additional styles to apply to the label text. |
value | boolean | - | The current state of the switch. |
onValueChange | (value: boolean) => void | - | Callback fired when the switch state changes. |
disabled | boolean | false | Whether the switch is disabled. |
...props | SwitchProps (from React Native) | - | All other React Native Switch props are supported. |
Accessibility
The Switch component is built with accessibility in mind:
- Uses native React Native Switch for optimal platform behavior
- Supports screen reader announcements for state changes
- Proper focus management and keyboard navigation
- Color contrast meets accessibility standards
- Label text is properly associated with the switch control
- Error states provide clear feedback to assistive technologies