REACT-NATIVES

WIRED FOR SPEED

react-natives v2.2.0

Theme

Light

Dark

Get Started

Components

Form Controls

Switch

A toggle switch for boolean on/off states with customizable track and thumb colors.

Example

Preview

Code

Props

Switch Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the switch container.

size

'sm' | 'md' | 'lg'

'md'

Controls the size of the switch.

isDisabled

boolean

false

Disables the switch.

value

boolean

—

The controlled on/off value of the switch.

defaultValue

boolean

—

The initial value of the switch when uncontrolled.

onToggle

(value: boolean) => void

—

Callback invoked when the switch value changes.

trackColor

{ false?: string; true?: string }

—

Custom colors for the switch track in each state.

thumbColor

string

—

Custom color for the switch thumb.

Usage Guidelines

When to use

Use Switch for toggling settings or preferences that take immediate effect.

Best practices

•

Use Switch for settings that take immediate effect (no submit button needed).

•

Always pair with a visible label describing what the switch controls.

•

Use trackColor to visually distinguish on/off states.

Accessibility

Switch has built-in toggle accessibility. Ensure a visible label is associated for screen reader context.

Related Components

Checkbox

A compound checkbox component supporting individual and grouped selection with indicator, icon, and label sub-components.

Radio

A compound radio button component for single-selection within a group, with indicator, icon, and label sub-components.

FormControl

A compound wrapper that provides shared state (disabled, invalid, required, read-only) to its label, helper text, and error message children.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License