SearchField

A SearchField is a text field designed for searches.

label

size

labelPosition

description

contextualHelp

isDisabled

import {SearchField} from '@react-spectrum/s2';

<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 '@react-spectrum/s2';
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

necessityIndicator

type

pattern

minLength

maxLength

import {SearchField, Button, Form} from '@react-spectrum/s2';

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

API

Name	Type	Default
`size`	`'S' \| 'M' \| 'L' \| 'XL'`	Default: `'M'`
The size of the SearchField.
`enterKeyHint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	Default: —
An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See MDN.
`type`	`'text' \| 'search' \| 'url' \| 'tel' \| 'email' \| 'password' \| string & {}`	Default: `'search'`
The type of input to render. See MDN.
`isDisabled`	`boolean`	Default: —
Whether the input is disabled.
`isReadOnly`	`boolean`	Default: —
Whether the input can be selected but not changed by the user.
`inputMode`	`'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search'`	Default: —
Hints at the type of data that might be entered by the user while editing the element or its contents. See MDN.
`autoCorrect`	`string`	Default: —
An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See MDN.
`spellCheck`	`string`	Default: —
An enumerated attribute that defines whether the element may be checked for spelling errors. See MDN.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.

`value`	`string`	Default: —
The current value (controlled).
`defaultValue`	`string`	Default: —
The default value (uncontrolled).
`onChange`	`(value: T) => void`	Default: —
Handler that is called when the value changes.