REACT-NATIVES

WIRED FOR SPEED

react-natives v2.2.0

Theme

Light

Dark

Get Started

Components

Form Controls

SearchInput

A text input with a search icon and clear button for search functionality.

Example

Preview

Code

Props

SearchInput Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the search input container.

value

string

—

The current search text value.

onChangeText

(text: string) => void

—

Callback invoked when the text changes.

size

'sm' | 'md' | 'lg'

'md'

Controls the size of the search input.

isDisabled

boolean

false

When true, disables the search input.

SearchInputField Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the search text field.

placeholder

string

—

Placeholder text for the search field.

SearchInputIcon Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the search icon.

as

React.ElementType

—

The icon component to render as the search icon.

SearchInputClearButton Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the clear button.

onPress

() => void

—

Callback invoked when the clear button is pressed.

Usage Guidelines

When to use

Use SearchInput for search fields where users need a clear visual indicator of the search action.

Best practices

•

Show SearchInputClearButton only when the input has a value.

•

Debounce onChangeText for search-as-you-type to avoid excessive queries.

•

Use a descriptive placeholder like "Search products..." for context.

Accessibility

SearchInput uses the search role for screen readers. The clear button announces "Clear search" when focused.

Related Components

Input

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

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