SearchFieldUpdated

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: (Optional) Magnifying glass icon positioned absolutely on the left side of the input. Supports custom children to replace the default icon. When omitted, the Input does not reserve leading space.
• SearchField.Input: Wraps the Input component with search-specific defaults. Reads value and onChangeText from the SearchField context automatically. Reserves leading and trailing space only when SearchIcon and ClearButton are composed.
• SearchField.ClearButton: (Optional) Small icon-only button to clear the search input. Automatically hidden when value is empty. Calls onChange("") from context on press. When omitted, the Input does not reserve trailing space; when composed but hidden (empty value), trailing padding stays so text does not jump on first keystroke.

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>

Without Search Icon

Omit SearchField.SearchIcon to drop the leading magnifier and its reserved padding. The Input reclaims the space automatically.

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

Omitting ClearButton as well removes the trailing space. When ClearButton is composed but hidden (the value is empty), trailing padding stays so text does not jump on the first keystroke.

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