SearchField

A search field allows a user to enter and clear a search query.

import {SearchField} from './SearchField';

<SearchField
  label="Search"
  placeholder="Search documents" />

Value

Use the value or defaultValue prop to set the text value, and onChange to handle user input. onSubmit is called when the user presses Enter.

Value: 
Submitted value: 

import {SearchField} from './SearchField';
import {useState} from 'react';

function Example() {
  let [search, setSearch] = useState('');
  let [submittedSearch, setSubmittedSearch] = useState('');

  return (
    <div>
      <SearchField
        label="Search"
        placeholder="Search documents"
        value={search}
        onChange={setSearch}
        onSubmit={setSubmittedSearch} />
      <pre style={{fontSize: 12}}>
        Value: {search}{'\n'}
        Submitted value: {submittedSearch}
      </pre>
    </div>
  );
}

Forms

Use the name prop to submit the text value to the server. Set the isRequired, minLength, maxLength, pattern, or type props to validate the value, or implement custom client or server-side validation. See the Forms guide to learn more.

import {SearchField} from './SearchField';
import {Button} from './Button';
import {Form} from './Form';;

function Example(props) {
  return (
    <Form>
      <SearchField
        {...props}
        label="Search"
        placeholder="Search documents"
        name="search"
        isRequired
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}

Examples

• Emoji PickerWith autocomplete, virtualized scrolling, and keyboard navigation.
• Filterable CRUD TableTable with search, filters, column resizing, and form validation.
• Photo LibraryVirtualized photo grid, view transitions, folder tree, search, and drag and drop.

API

<SearchField>
  <Label />
  <Input />
  <Button />
  <Text slot="description" />
  <FieldError />
</SearchField>

SearchField

Default className: react-aria-SearchField