REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Form Controls

Input

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

Example

Preview

Code

Props

Input Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the input container.

variant

'outline' | 'filled' | 'underlined' | 'rounded'

'outline'

The visual variant of the input.

size

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

'md'

Controls the height and font size of the input.

isDisabled

boolean

false

Disables the input field.

isInvalid

boolean

false

Applies invalid/error styling to the input.

isReadOnly

boolean

false

Makes the input read-only.

InputField Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the text input element.

InputSlot Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the input slot container.

InputIcon Props

Prop

Type

Default

Description

as *

React.ElementType

—

The icon component to render in the input slot.

className

string

—

NativeWind utility classes for the input icon.

Usage Guidelines

When to use

Use Input for single-line text entry fields within forms.

Best practices

•

Use InputSlot with InputIcon for leading/trailing icons.

•

Match the variant to your form design system (outline is most common).

•

Always wrap with FormControl for proper label and error support.

Accessibility

Input fields inherit accessibility state from FormControl. Add placeholder text as a hint, not a replacement for labels.

Related Components

FormControl

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

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