---
name: 'Field: Search'
route: /components/common/forms/form-field-search
menu: Forms
edit: false
---

import { Playground, Props } from 'docz'
import { State } from 'react-powerplug'
import FormFieldSearch from './form-field-search'

# FormFieldSearch
**SUBCATEGORY:** Forms

<hr />

## Search field
### Description
For single input search forms. Consider using "Search" text instead of an icon.

<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldSearch
        {...state}
        id='search'
        labelText="Label"
        maxLength={30}
        onChange={e => setState({ value: e.target.value })}
        placeholder='Search text placeholder'
      />
    )}
  </State>
</Playground>

<hr />

## Search field (adjacent)
### Description
For single input search forms. Consider using "Search" text instead of an icon.

**Avoid including `error`, `labelTag` and `helperText` props when using adjacent layout. Instead, use the standard layout.**

<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldSearch
        {...state}
        adjacent
        id='search-adjacent'
        labelText="Label"
        maxLength={30}
        onChange={e => setState({ value: e.target.value })}
        placeholder='Search text placeholder'
      />
    )}
  </State>
</Playground>

<hr />

## Search field (inverse)
### Description
For single input search forms. Consider using "Search" text instead of an icon.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldSearch
        {...state}
        id='search-inverse'
        inverse
        labelText="Label"
        maxLength={30}
        onChange={e => setState({ value: e.target.value })}
        placeholder='Search text placeholder'
      />
    )}
  </State>
</Playground>

<hr />

## Search field (inverse, adjacent)
### Description
For single input search forms. Consider using "Search" text instead of an icon.

**Avoid including `error`, `labelTag` and `helperText` props when using adjacent layout. Instead, use the standard layout.**

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldSearch
        {...state}
        id='search-inverse'
        adjacent
        inverse
        labelText="Label"
        maxLength={30}
        onChange={e => setState({ value: e.target.value })}
        placeholder='Search text placeholder'
      />
    )}
  </State>
</Playground>

<hr />

## Search field (slim)
### Description
For single input search forms. Use where inputs are nested or constrained by layout.
Consider using "Search" text instead of an icon.

<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldSearch
        {...state}
        id='search-slim'
        labelText="Label"
        maxLength={30}
        onChange={e => setState({ value: e.target.value })}
        placeholder='Search text placeholder'
        slim
      />
    )}
  </State>
</Playground>

<hr />

## Search field (slim, adjacent)
### Description
For single input search forms. Use where inputs are nested or constrained by layout.
Consider using "Search" text instead of an icon.

**Avoid including `error`, `labelTag` and `helperText` props when using adjacent layout. Instead, use the standard layout.**

<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldSearch
        {...state}
        id='search-slim'
        labelText="Label"
        maxLength={30}
        onChange={e => setState({ value: e.target.value })}
        placeholder='Search text placeholder'
        slim
        adjacent
      />
    )}
  </State>
</Playground>

<hr />

## Search field (slim, inverse)
### Description
For single input search forms. Use where inputs are nested or constrained by layout.
Consider using "Search" text instead of an icon.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldSearch
        {...state}
        id='search-slim-inverse'
        inverse
        slim
        labelText="Label"
        maxLength={30}
        onChange={e => setState({ value: e.target.value })}
        placeholder='Search text placeholder'
      />
    )}
  </State>
</Playground>

<hr />

## Search field (slim, inverse, adjacent)
### Description
For single input search forms. Use where inputs are nested or constrained by layout.
Consider using "Search" text instead of an icon.

**Avoid including `error`, `labelTag` and `helperText` props when using adjacent layout. Instead, use the standard layout.**

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldSearch
        {...state}
        id='search-slim-inverse'
        inverse
        slim
        adjacent
        labelText="Label"
        maxLength={30}
        onChange={e => setState({ value: e.target.value })}
        placeholder='Search text placeholder'
      />
    )}
  </State>
</Playground>

<hr />

## Properties
<Props of={FormFieldSearch} />