Search Input

Use Search Input...

For page search query.

Don't use Search Input...

If you need our default Search Input with options: use Combobox with Search Input instead.

accessibleTextForClearButton and accessibleTextForClearButton is deprecated in SWAN 3.24. These prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system and remove these prop.

<StandardForm>
  <FormField>
    <FormLabel visuallyHidden>My SearchInput</FormLabel>
    <SearchInput
      placeholder="Search"
      accessibleTextForClearButton="Clear"
      accessibleTextForSearchButton="Search"
    />
  </FormField>
</StandardForm>

<StandardForm>
  <FormField>
    <FormLabel visuallyHidden>My SearchInput</FormLabel>
    <SearchInput
      placeholder="Search"
      accessibleTextForClearButton="Clear"
      accessibleTextForSearchButton="Search"
    />
  </FormField>
</StandardForm>

With floating label

When there are multiple search inputs on a page, the appearance of the search button alone is not sufficient to distinguish between them. In those cases, use a floating label to provide a visible label for the secondary search input on a page. Use the component InputWithFloatingLabel to achieve it.

Note: the floating label has the same appearance as placeholder text but it is not an HTML placeholder; any actual placeholder attribute on the text area is transparent.

ReactVanilla

<StandardForm>
  <FormField>
    <InputWithFloatingLabel>
      <FloatingLabel>FloatingLabel</FloatingLabel>
      <SearchInput placeholder="Search..." />
    </InputWithFloatingLabel>
  </FormField>
</StandardForm>

<StandardForm>
  <FormField>
    <InputWithFloatingLabel>
      <FloatingLabel>FloatingLabel</FloatingLabel>
      <SearchInput placeholder="Search..." />
    </InputWithFloatingLabel>
  </FormField>
</StandardForm>

<form class="swan-form">
  <div>
    <div class="swan-vanilla-ignore swan-input-with-floating-label">
      <label class="swan-label" for="auto-id-8wnrsyf3g-416"
        >FloatingLabel</label
      >
      <div class="swan-search-input">
        <input
          type="search"
          placeholder="Search..."
          aria-invalid="false"
          class="swan-input"
          id="auto-id-8wnrsyf3g-416"
        /><button
          type="button"
          class="swan-search-input-clear swan-button swan-button-skin-tertiary swan-button-round"
        >
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-clear"
            style='mask-image: url("{{ "clear" | icon }}");'
          /></button
        ><span class="swan-search-divider"></span
        ><button
          type="submit"
          class="swan-search-input-submit swan-button swan-button-skin-tertiary swan-button-round"
        >
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-search"
            style='mask-image: url("{{ "search" | icon }}");'
          />
        </button>
      </div>
    </div>
  </div>
</form>

<form class="swan-form">
  <div>
    <div class="swan-vanilla-ignore swan-input-with-floating-label">
      <label class="swan-label" for="auto-id-8wnrsyf3g-416"
        >FloatingLabel</label
      >
      <div class="swan-search-input">
        <input
          type="search"
          placeholder="Search..."
          aria-invalid="false"
          class="swan-input"
          id="auto-id-8wnrsyf3g-416"
        /><button
          type="button"
          class="swan-search-input-clear swan-button swan-button-skin-tertiary swan-button-round"
        >
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-clear"
            style='mask-image: url("{{ "clear" | icon }}");'
          /></button
        ><span class="swan-search-divider"></span
        ><button
          type="submit"
          class="swan-search-input-submit swan-button swan-button-skin-tertiary swan-button-round"
        >
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-search"
            style='mask-image: url("{{ "search" | icon }}");'
          />
        </button>
      </div>
    </div>
  </div>
</form>

Managing state

As is the case with most form elements, folks often want to "control" this component. Controlling a component means that you take ownership over its state rather than letting the browser manage the state for you. When you control a component, you own the source of truth for the UI. This means that you don't need to query the DOM in order to determine the current value of the element. So, when it comes time to use the value of the element somewhere else (e.g. submitting the selection to a back-end service) you can trust your stored value.

To control a SearchInput, store the selected value (e.g., in React state or a Redux store) and provide a handler to update this value when users interact with the component.

() => {
  const [value, setValue] = React.useState('')
  return (
    <FormField>
      <FormLabel visuallyHidden>My SearchInput</FormLabel>
      <SearchInput
        placeholder="Search"
        value={value}
        onChange={e => setValue(e.target.value)}
        onClear={() => setValue('')}
      />
    </FormField>
  )
}

() => {
  const [value, setValue] = React.useState('')
  return (
    <FormField>
      <FormLabel visuallyHidden>My SearchInput</FormLabel>
      <SearchInput
        placeholder="Search"
        value={value}
        onChange={e => setValue(e.target.value)}
        onClear={() => setValue('')}
      />
    </FormField>
  )
}

If you don't need to manage the state of the SearchInput, you can omit the value and onChange props, allowing the browser to handle the state. Consider using the defaultValue prop to specify the initial selected value and wrapping inside of a StandardForm to handle the onSubmit.

Disabled

Use disabled to prevent users from entering text; when the search action is completely irrelevant to the user's current task and is dependent on a prior selection.

When Search input is part of a Form, use helper text to explain why searching is not possible.

<StandardForm>
  <FormField>
    <FormLabel>
      FormLabel <FormLabelOptional>(Optional)</FormLabelOptional>
    </FormLabel>
    <FormInputGroup>
      <SearchInput disabled placeholder="Placeholder..." />
      <FormHelper>Explain why the field is disabled</FormHelper>
    </FormInputGroup>
  </FormField>
</StandardForm>

<StandardForm>
  <FormField>
    <FormLabel>
      FormLabel <FormLabelOptional>(Optional)</FormLabelOptional>
    </FormLabel>
    <FormInputGroup>
      <SearchInput disabled placeholder="Placeholder..." />
      <FormHelper>Explain why the field is disabled</FormHelper>
    </FormInputGroup>
  </FormField>
</StandardForm>

Accessibility

Provide assistive devices with information on what the input field does. You can either:

Use an aria-label attribute with a localized value.
Wrap the Search Input into a FormField with a FormLabel component with the visuallyHidden prop. Refer to Form

Provide assistive devices with information on what the buttons do for the Search and Clear icon buttons that are simply icons and have no visible text. For react users, if you’re not using SWAN’s i18n system, the following props are required: accessibleTextForClearButton and accessibleTextForSearchButton.

Implementation

Avoid placing a Search Input inside an element that is a table cell or has CSS display: table-cell. This configuration may result in the Search Input being rendered more narrowly than its actual minimum width. Use Grid to constrain it instead.

Props

SearchInput

This component is implemented using the <input /> as the root element. You can utilize the native attributes supported by <input /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
skin	`"standard" \| "error" \| null`	false	The visual variant. Note that error is implied if the SearchInput is used inside of a FormInput that also contains a FormError. Available options: 'standard', 'error'	standard
onClear	`((...args: any[]) => any) \| null`	false	The click handler for the clear button	null
onSearchSubmit	`((...args: any[]) => any) \| null`	false	The click handler for the search button	null
accessibleTextForClearButton	`string`	false	⚠️ Deprecated - This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support. The aria-label for the clear button, required	null
accessibleTextForSearchButton	`string`	false	⚠️ Deprecated - This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support. The aria-label for the search button, required	null

Verb	Noun
Search	t shirts
Search	your order history
Search	help articles
Search	logo ideas
Search	gallery templates

Use Search Input...

Don't use Search Input...

With floating label

Managing state

Disabled

Accessibility

Implementation

Anatomy

Content accessibility

AA (required)

AAA (advised)

Content identity (editorial)

Content usability

Language

Label/placeholder text

Localization

SEO

Props

Related