REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Form Controls

FormControl

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

Example

Preview

Code

Props

FormControl Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the form control container.

isDisabled

boolean

false

Disables the form control and all its children.

isInvalid

boolean

false

Marks the form control as invalid, showing error styling.

isRequired

boolean

false

Marks the field as required and adds a required indicator.

isReadOnly

boolean

false

Marks the form control as read-only.

size

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

'md'

Controls the size of the form control and its children.

FormControlLabel Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the label container.

FormControlLabelText Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the label text.

FormControlHelperText Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the helper text.

FormControlErrorMessage Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the error message container.

FormControlErrorIcon Props

Prop

Type

Default

Description

as

React.ElementType

—

The icon component to render for the error indicator.

className

string

—

NativeWind utility classes for the error icon.

Usage Guidelines

When to use

Use FormControl to wrap any form field that needs a label, validation messages, or helper text.

Best practices

•

Always wrap form fields with FormControl for consistent label and error handling.

•

Use isRequired to automatically show required indicators.

•

Place FormControlHelperText below the input for guidance.

Accessibility

FormControl automatically associates labels and error messages with the input field for screen readers.

Related Components

Input

A compound text input component with support for leading/trailing slots, icons, and multiple visual variants.

Textarea

A multi-line text input with variant and size options, built on top of React Native TextInput.

Select

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

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License