REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Core Primitives

ToggleGroup

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

Example

Preview

Code

Props

ToggleGroup Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the toggle group container.

type

'single' | 'multiple'

'single'

Whether one or multiple items can be selected.

value

string | string[]

—

The currently selected value(s).

onValueChange

(value: string | string[]) => void

—

Callback invoked when the selection changes.

variant

'outline' | 'solid'

'outline'

The visual style variant of the toggle group items.

size

'sm' | 'md' | 'lg'

'md'

Controls the size of all toggle items in the group.

disabled

boolean

false

When true, disables all toggle items in the group.

ToggleGroupItem Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for an individual toggle group item.

value *

string

—

The unique value of this toggle item.

Usage Guidelines

When to use

Use ToggleGroup for mutually exclusive or multi-select toggle options like text alignment or view modes.

Best practices

•

Use single type for mutually exclusive selections and multiple for multi-select.

•

Provide a minimum of 2 items for meaningful toggle group usage.

•

Label each ToggleGroupItem clearly — use icons with accessibilityLabel for icon-only items.

Accessibility

ToggleGroup uses group semantics. Each item announces its selected state. Use accessibilityLabel on items for icon-only content.

Related Components

Toggle

A pressable button that toggles between on and off states.

SegmentedControl

A horizontal set of two or more segments for switching between views.

Radio

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

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License