SearchField

A SearchField is a text field designed for searches.

Example#

function Example() {
  let [submittedText, setSubmittedText] = React.useState();

  return (
    <>
      <SearchField
        label="Search"
        onSubmit={setSubmittedText} />
      <p>Submitted text: {submittedText}</p>
    </>
  );
}

function Example() {
  let [submittedText, setSubmittedText] = React.useState();

  return (
    <>
      <SearchField
        label="Search"
        onSubmit={setSubmittedText} />
      <p>Submitted text: {submittedText}</p>
    </>
  );
}

function Example() {
  let [
    submittedText,
    setSubmittedText
  ] = React.useState();

  return (
    <>
      <SearchField
        label="Search"
        onSubmit={setSubmittedText}
      />
      <p>
        Submitted text:
        {' '}
        {submittedText}
      </p>
    </>
  );
}

Value#

A SearchField's value is empty by default, but an initial, uncontrolled, value can be provided using the defaultValue prop. Alternatively, a controlled value can be provided using the value prop.

function Example() {
  let [searchValue, setSearchValue] = React.useState('puppies');
  return (
    <Flex gap="size-300">
      <SearchField
        defaultValue="puppies"
        label="Search (uncontrolled)" />

      <SearchField
        value={searchValue}
        onChange={setSearchValue}
        label="Search (controlled)" />
    </Flex>
  );
}

function Example() {
  let [searchValue, setSearchValue] = React.useState(
    'puppies'
  );
  return (
    <Flex gap="size-300">
      <SearchField
        defaultValue="puppies"
        label="Search (uncontrolled)"
      />

      <SearchField
        value={searchValue}
        onChange={setSearchValue}
        label="Search (controlled)"
      />
    </Flex>
  );
}

function Example() {
  let [
    searchValue,
    setSearchValue
  ] = React.useState(
    'puppies'
  );
  return (
    <Flex gap="size-300">
      <SearchField
        defaultValue="puppies"
        label="Search (uncontrolled)"
      />

      <SearchField
        value={searchValue}
        onChange={setSearchValue}
        label="Search (controlled)"
      />
    </Flex>
  );
}

Labeling#

A visual label should be provided for the SearchField using the label prop. If the SearchField is required, the isRequired and necessityIndicator props can be used to show a required state.

<Flex gap="size-300" wrap>
  <SearchField label="Search" />
  <SearchField label="Search" isRequired necessityIndicator="icon" />
  <SearchField label="Search" isRequired necessityIndicator="label" />
  <SearchField label="Search" necessityIndicator="label" />
</Flex>

<Flex gap="size-300" wrap>
  <SearchField label="Search" />
  <SearchField
    label="Search"
    isRequired
    necessityIndicator="icon"
  />
  <SearchField
    label="Search"
    isRequired
    necessityIndicator="label"
  />
  <SearchField
    label="Search"
    necessityIndicator="label"
  />
</Flex>

<Flex
  gap="size-300"
  wrap
>
  <SearchField label="Search" />
  <SearchField
    label="Search"
    isRequired
    necessityIndicator="icon"
  />
  <SearchField
    label="Search"
    isRequired
    necessityIndicator="label"
  />
  <SearchField
    label="Search"
    necessityIndicator="label"
  />
</Flex>

Accessibility#

If a visible label isn't specified, an aria-label must be provided to the SearchField for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead.

Internationalization#

In order to internationalize a SearchField, a localized string should be passed to the label or aria-label prop. When the necessityIndicator prop is set to "label", a localized string will be provided for "(required)" or "(optional)" automatically.

Events#

The most commonly used handlers for events in SearchField are the:

• onChange prop which is triggered whenever the value is edited by the user.
• onSubmit prop which is triggered whenever the value is submitted by the user.
• onClear prop which is triggered whenever the value is cleared by the user.

The example below uses onChange, onSubmit, and onClear to update two separate elements with the text entered into the SearchField.

function Example() {
  let [currentText, setCurrentText] = React.useState('');
  let [submittedText, setSubmittedText] = React.useState('');

  return (
    <div>
      <SearchField
        onClear={() => setCurrentText('')}
        onChange={setCurrentText}
        onSubmit={setSubmittedText}
        label="Your text"
        value={currentText}
      />
      <pre>Mirrored text: {currentText}</pre>
      <pre>Submitted text: {submittedText}</pre>
    </div>
  );
}

function Example() {
  let [currentText, setCurrentText] = React.useState('');
  let [submittedText, setSubmittedText] = React.useState(
    ''
  );

  return (
    <div>
      <SearchField
        onClear={() => setCurrentText('')}
        onChange={setCurrentText}
        onSubmit={setSubmittedText}
        label="Your text"
        value={currentText}
      />
      <pre>Mirrored text: {currentText}</pre>
      <pre>Submitted text: {submittedText}</pre>
    </div>
  );
}

function Example() {
  let [
    currentText,
    setCurrentText
  ] = React.useState('');
  let [
    submittedText,
    setSubmittedText
  ] = React.useState('');

  return (
    <div>
      <SearchField
        onClear={() =>
          setCurrentText(
            ''
          )}
        onChange={setCurrentText}
        onSubmit={setSubmittedText}
        label="Your text"
        value={currentText}
      />
      <pre>Mirrored text: {currentText}</pre>
      <pre>Submitted text: {submittedText}</pre>
    </div>
  );
}

Props#

Visual options#

Quiet#

<SearchField label="Search" isQuiet />

<SearchField label="Search" isQuiet />

<SearchField
  label="Search"
  isQuiet
/>

Disabled#

<SearchField label="Search" isDisabled />

<SearchField label="Search" isDisabled />

<SearchField
  label="Search"
  isDisabled
/>

Read only#

The isReadOnly boolean prop makes the SearchField's text content immutable. Unlike isDisabled, the SearchField remains focusable and the contents can still be copied. See the MDN docs for more information.

<SearchField label="Search" defaultValue="abc@adobe.com" isReadOnly />

<SearchField
  label="Search"
  defaultValue="abc@adobe.com"
  isReadOnly
/>

<SearchField
  label="Search"
  defaultValue="abc@adobe.com"
  isReadOnly
/>

Label alignment and position#

By default, the label is positioned above the SearchField. The labelPosition prop can be used to position the label to the side. The labelAlign prop can be used to align the label as "start" or "end". For left-to-right (LTR) languages, "start" refers to the left most edge of the SearchField and "end" refers to the right most edge. For right-to-left (RTL) languages, this is flipped.

<SearchField label="Search" labelPosition="side" labelAlign="end" />

<SearchField
  label="Search"
  labelPosition="side"
  labelAlign="end"
/>

<SearchField
  label="Search"
  labelPosition="side"
  labelAlign="end"
/>

Help text#

View guidelines

Both a description and an error message can be supplied to a ComboBox. The description is always visible unless the validationState is “invalid” and an error message is provided. The error message can be used to help the user fix their input quickly and should be specific to the detected error. All strings should be localized.

function Example() {
  let [value, setValue] = React.useState('0');
  let isValid = React.useMemo(() => /^\d$/.test(value), [value]);

  return (
    <SearchField
      validationState={isValid ? 'valid' : 'invalid'}
      value={value}
      onChange={setValue}
      label="Search your favorite number"
      maxLength={1}
      description="Enter a single digit number."
      errorMessage={value === ''
        ? 'Empty input not allowed.'
        : 'Single digit numbers are 0-9.'}
    />
  );
}

function Example() {
  let [value, setValue] = React.useState('0');
  let isValid = React.useMemo(() => /^\d$/.test(value), [
    value
  ]);

  return (
    <SearchField
      validationState={isValid ? 'valid' : 'invalid'}
      value={value}
      onChange={setValue}
      label="Search your favorite number"
      maxLength={1}
      description="Enter a single digit number."
      errorMessage={value === ''
        ? 'Empty input not allowed.'
        : 'Single digit numbers are 0-9.'}
    />
  );
}

function Example() {
  let [value, setValue] =
    React.useState('0');
  let isValid = React
    .useMemo(
      () =>
        /^\d$/.test(
          value
        ),
      [value]
    );

  return (
    <SearchField
      validationState={isValid
        ? 'valid'
        : 'invalid'}
      value={value}
      onChange={setValue}
      label="Search your favorite number"
      maxLength={1}
      description="Enter a single digit number."
      errorMessage={value ===
          ''
        ? 'Empty input not allowed.'
        : 'Single digit numbers are 0-9.'}
    />
  );
}

Custom width#

<SearchField label="Search" width="size-3600" />

<SearchField label="Search" width="size-3600" />

<SearchField
  label="Search"
  width="size-3600"
/>

Custom icon#

The icon in the SearchField can be changed to suit the theme of a search. For instance, if the SearchField was for searching users, an icon relating to that would help convey meaning. See the Icons page for more.

<SearchField label="Search for users" icon={<User />} />

<SearchField label="Search for users" icon={<User />} />

<SearchField
  label="Search for users"
  icon={<User />}
/>