SearchFieldNew

Import

import { SearchField } from 'heroui-native';

Anatomy

<SearchField value={value} onChange={onChange}>
  <SearchField.Group>
    <SearchField.SearchIcon />
    <SearchField.Input />
    <SearchField.ClearButton />
  </SearchField.Group>
</SearchField>

• SearchField: Root container that accepts value and onChange, providing them to children via context. Also provides form field state (isDisabled, isInvalid, isRequired) and animation settings.
• SearchField.Group: Flex-row container that positions the search icon, input, and clear button horizontally.
• SearchField.SearchIcon: Magnifying glass icon positioned absolutely on the left side of the input. Supports custom children to replace the default icon.
• SearchField.Input: Wraps the Input component with search-specific defaults. Reads value and onChangeText from the SearchField context automatically.
• SearchField.ClearButton: Small icon-only button to clear the search input. Automatically hidden when value is empty. Calls onChange("") from context on press.

Usage

Basic Usage

The SearchField component uses compound parts to create a search input. Pass value and onChange to the root; the Input and ClearButton consume them via context.

<SearchField value={searchValue} onChange={setSearchValue}>
  <SearchField.Group>
    <SearchField.SearchIcon />
    <SearchField.Input />
    <SearchField.ClearButton />
  </SearchField.Group>
</SearchField>

With Label and Description

Add a Label and Description outside the Group to provide context for the search field.

<SearchField value={searchValue} onChange={setSearchValue}>
  <Label>Find products</Label>
  <SearchField.Group>
    <SearchField.SearchIcon />
    <SearchField.Input />
    <SearchField.ClearButton />
  </SearchField.Group>
  <Description>Search by name, category, or SKU</Description>
</SearchField>

With Validation

Use isInvalid and isRequired on the root to control validation state. Pair with FieldError to display error messages.

<SearchField
  value={searchValue}
  onChange={setSearchValue}
  isRequired
  isInvalid={isInvalid}
>
  <Label>Search users</Label>
  <SearchField.Group>
    <SearchField.SearchIcon />
    <SearchField.Input />
    <SearchField.ClearButton />
  </SearchField.Group>
  <Description hideOnInvalid>Enter at least 3 characters to search</Description>
  <FieldError>No results found. Please try a different search term.</FieldError>
</SearchField>

Custom Search Icon

Replace the default magnifying glass icon by passing children to SearchField.SearchIcon.

<SearchField value={searchValue} onChange={setSearchValue}>
  <SearchField.Group>
    <SearchField.SearchIcon>
      <Text className="text-base">🔍</Text>
    </SearchField.SearchIcon>
    <SearchField.Input className="pl-10" />
    <SearchField.ClearButton />
  </SearchField.Group>
</SearchField>

Disabled

Set isDisabled on the root to disable all child components via context.

<SearchField value="Previous query" isDisabled>
  <Label>Disabled search</Label>
  <SearchField.Group>
    <SearchField.SearchIcon />
    <SearchField.Input />
  </SearchField.Group>
  <Description>Search is temporarily unavailable</Description>
</SearchField>

Example

import { Description, Label, SearchField } from 'heroui-native';
import { useState } from 'react';
import { View } from 'react-native';

export default function SearchFieldExample() {
  const [searchValue, setSearchValue] = useState('');

  return (
    <View className="px-5">
      <SearchField value={searchValue} onChange={setSearchValue}>
        <Label>Find products</Label>
        <SearchField.Group>
          <SearchField.SearchIcon />
          <SearchField.Input />
          <SearchField.ClearButton />
        </SearchField.Group>
        <Description>Search by name, category, or SKU</Description>
      </SearchField>
    </View>
  );
}

You can find more examples in the GitHub repository.

API Reference

SearchField

AnimationRootDisableAll

Animation configuration for the SearchField root component. Can be:

• "disable-all": Disable all animations including children (cascades down)
• undefined: Use default animations

SearchField.Group

SearchField.SearchIcon

SearchFieldSearchIconIconProps

SearchField.Input

Extends Input props with search-specific defaults (placeholder="Search...", returnKeyType="search", accessibilityRole="search"). Omits value and onChangeText because they are provided by the SearchField context.

SearchField.ClearButton

Automatically hidden when the controlled value is an empty string. Calls onChange("") from context on press. Additional onPress handlers passed via props are called after clearing.

SearchFieldClearButtonIconProps

Hooks

useSearchField

Hook to access the search field state from context. Must be used within a SearchField component.

import { useSearchField } from 'heroui-native';

const { value, onChange, isDisabled, isInvalid, isRequired } = useSearchField();

Returns