Components
Switch
A toggle switch control for binary on/off states with smooth animation.
The Switch component provides an animated toggle built with React Native's Pressable and react-native-reanimated. It supports controlled and uncontrolled modes, two size variants, disabled states, and smooth thumb translation animations.
Preview
On
Off
Installation
npx novaui-cli add switchImport
import { Switch } from 'novaui-components'Basic Usage
A simple toggle switch with on/off states:
Airplane mode
import { useState } from 'react'
import { Switch } from 'novaui-components'
import { Text, View } from 'react-native'
export function BasicSwitch() {
const [checked, setChecked] = useState(false)
return (
<View className="flex-row items-center gap-2">
<Switch checked={checked} onCheckedChange={setChecked} />
<Text className="text-sm text-foreground">Airplane mode</Text>
</View>
)
}States
Checked (On)
Notifications enabled
<View className="flex-row items-center gap-2">
<Switch checked={true} onCheckedChange={setChecked} />
<Text className="text-sm text-foreground">Notifications enabled</Text>
</View>Unchecked (Off)
Notifications disabled
<View className="flex-row items-center gap-2">
<Switch checked={false} onCheckedChange={setChecked} />
<Text className="text-sm text-foreground">Notifications disabled</Text>
</View>Disabled
On & disabled
Off & disabled
<Switch checked={true} disabled />
<Switch checked={false} disabled />Sizes
Default
Default size
<Switch size="default" checked={true} onCheckedChange={setChecked} />Small
Small size
<Switch size="sm" checked={true} onCheckedChange={setChecked} />Props API
SwitchProps
Extends React.ComponentPropsWithoutRef<typeof Pressable> and includes:
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | - | Controlled checked state. When undefined, the switch manages its own state |
onCheckedChange | (checked: boolean) => void | - | Callback fired when the switch is toggled |
disabled | boolean | false | When true, the switch is non-interactive with reduced opacity |
size | 'default' | 'sm' | 'default' | The size variant of the switch |
className | string | - | Additional CSS classes for custom styling |
Best Practices
- Use for immediate actions: Switches should toggle settings that take effect immediately (e.g., enabling notifications)
- Provide a label: Always include a text label describing what the switch controls
- Controlled vs uncontrolled: Use
checked+onCheckedChangefor form integration; omitcheckedfor simple standalone toggles - Show current state: The visual state should clearly indicate whether the feature is on or off
Related Components
- Use
Checkboxwhen the action requires explicit confirmation (e.g., form submission) - Pair with
FieldandFieldLabelfor labeled form layouts - Use with
FieldDescriptionto explain what the setting controls