SearchField

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

label

description

isDisabled

Example

SearchField.tsx

SearchField.css

Example

SearchField.tsx

SearchField.css

import {SearchField} from './SearchField';

<SearchField label="Search" />

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"
        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.

isRequired

type

pattern

minLength

maxLength

import {SearchField} from './SearchField';
import {Button} from './Button';
import {Form} from 'react-aria-components';

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

SearchField

Value

Forms

API