Skip to main content

SearchField

Search allows users to quickly find content. The Search field is made up of the Text field component and an optional Button component.

Basic Usage​

<SearchField
  onSubmit={value => console.log(`search submitted: ${value}`)}
/>

With an initial value​

<SearchField
  onSubmit={value => console.log(`search submitted: ${value}`)}
  value="foobar"
/>

With a placeholder​

<SearchField
  onSubmit={value => console.log(`search submitted: ${value}`)}
  placeholder="foobar"
/>

With callbacks​

<SearchField
  onSubmit={value => console.log(`search submitted: ${value}`)}
  onChange={value => console.log(`value changed: ${value}`)}
  onFocus={event => console.log(`input focused: ${event}`)}
  onBlur={event => console.log(`input blurred: ${event}`)}
  onClear={() => console.log('search cleared')}
/>

With a custom label​

<SearchField
  onSubmit={value => console.log(`search submitted: ${value}`)}
  label="Search:"
/>

With custom screenreader text​

<SearchField
  onSubmit={value => console.log(`search submitted: ${value}`)}
  screenReaderText={{
    label: 'buscar',
    clearButton: 'borrar búsqueda',
    submitButton: 'enviar búsqueda',
  }}
/>

With the submit button outside the input​

<SearchField
  submitButtonLocation="external"
  onSubmit={value => console.log(`search submitted: ${value}`)}
/>

Advanced Usage​

For needs that deviate from the basic usage above, use <SearchField.Advanced />. The children elements must contain the SearchField.Label and SearchField.Input components at a minimum.

With a custom label​

<SearchField.Advanced
  onSubmit={value => console.log(`search submitted: ${value}`)}
>
  <SearchField.Label>Search:</SearchField.Label>
  <SearchField.Input />
  <SearchField.ClearButton />
  <SearchField.SubmitButton />
</SearchField.Advanced>

With an initial value​

<SearchField.Advanced
  onSubmit={value => console.log(`search submitted: ${value}`)}
  value="foobar"
>
  <SearchField.Label>Search:</SearchField.Label>
  <SearchField.Input />
  <SearchField.ClearButton />
  <SearchField.SubmitButton />
</SearchField.Advanced>

With a placeholder​

<SearchField.Advanced
  onSubmit={value => console.log(`search submitted: ${value}`)}
>
  <SearchField.Label>Search:</SearchField.Label>
  <SearchField.Input placeholder="foobar" />
  <SearchField.ClearButton />
  <SearchField.SubmitButton />
</SearchField.Advanced>

With no clear button​

<SearchField.Advanced
  onSubmit={value => console.log(`search submitted: ${value}`)}
>
  <SearchField.Label />
  <SearchField.Input />
  <SearchField.SubmitButton />
</SearchField.Advanced>

With no submit or clear buttons​

<SearchField.Advanced
  onSubmit={value => console.log(`search submitted: ${value}`)}
>
  <SearchField.Label />
  <SearchField.Input />
</SearchField.Advanced>

Advanced usage with the submit button outside the input​

Use class pgn__searchfield_wrapper to group input elements apart from the submit button.

<SearchField.Advanced
  onSubmit={value => console.log(`search submitted: ${value}`)}
  submitButtonLocation="external"
>
  <div className="pgn__searchfield_wrapper">
    <SearchField.Label/>
    <SearchField.Input/>
  </div>
  <SearchField.SubmitButton submitButtonLocation="external" />
</SearchField.Advanced>