REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Core Primitives

Toggle

A pressable button that toggles between on and off states.

Example

Preview

Code

Props

Toggle Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the toggle button.

isPressed

boolean

—

Controlled pressed state of the toggle.

onPressedChange

(pressed: boolean) => void

—

Callback invoked when the pressed state changes.

variant

'outline' | 'solid'

'outline'

The visual style variant of the toggle.

size

'sm' | 'md' | 'lg'

'md'

Controls the size of the toggle button.

disabled

boolean

false

When true, disables the toggle.

Usage Guidelines

When to use

Use Toggle for binary state controls like bold/italic formatting, mute/unmute, or any on/off action.

Best practices

•

Use Toggle for binary state actions — prefer Switch for settings-style toggles.

•

Provide clear visual feedback between pressed and unpressed states.

•

Group related toggles together with ToggleGroup for mutual exclusion.

Accessibility

Toggle announces its pressed state to screen readers. Use accessibilityLabel to describe the toggle action.

Related Components

ToggleGroup

A group of toggle buttons where one or multiple can be selected.

Switch

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

Button

A compound interactive button component with text, icon, and spinner sub-components, supporting multiple actions, variants, and sizes.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License