REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Form Controls

Radio

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

Example

Preview

Code

Props

Radio Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the radio container.

value *

string

—

The value associated with this radio option.

isDisabled

boolean

false

Disables the radio option.

isInvalid

boolean

false

Applies invalid/error styling to the radio option.

size

'xs' | 'sm' | 'md' | 'lg' | 'xl'

'md'

Controls the size of the radio.

RadioGroup Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the radio group container.

value

string

—

The controlled selected value.

defaultValue

string

—

The initial selected value when uncontrolled.

onChange

(value: string) => void

—

Callback invoked when the selected value changes.

isDisabled

boolean

false

Disables all radio options in the group.

isInvalid

boolean

false

Applies invalid styling to all radios in the group.

size

'xs' | 'sm' | 'md' | 'lg' | 'xl'

'md'

Controls the size of all radios in the group.

RadioIndicator Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the radio indicator circle.

RadioIcon Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the radio icon.

RadioLabel Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the radio label text.

Usage Guidelines

When to use

Use Radio when users must select exactly one option from a list of mutually exclusive choices.

Best practices

•

Always use RadioGroup to manage mutually exclusive options.

•

Provide clear labels for each Radio option.

•

Use when there are 2-5 options; use Select for longer lists.

Accessibility

RadioGroup manages focus and selection state. Each Radio option announces its label and selected state.

Related Components

Checkbox

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

Select

A compound dropdown select component with trigger, portal-based content, search filtering, single-select, and multi-select badge support.

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