---
name: ChipField
menu: Components
route: /components/chip-field
---

import { Playground } from 'docz';

import { ChipField } from './';
import { Pane } from '../Pane';
import { InputField } from '../InputField';

# ChipField

The `<ChipField/>` component.

## Import

```js
import { ChipField } from '@firstclasspostcodes/sw13';
// or
import { ChipField } from '@firstclasspostcodes/sw13/lib/components/ChipField';
```

## Example

<Playground>
  <ChipField onChange={arr => console.log(arr)} chips={[{ label: 'hello', background: 'green' }, { label: 'david' }]} />
</Playground>

<Playground>
  <Pane spacing={{ py: { sm: 4 } }} radius="2" background="gray" hue="0">
    <Pane spacing={{ mx: { sm: 4 }, mt: 4 }}>
      <InputField 
        input={(props) => <ChipField {...props} />}
        inputProps={{
          chips: [{ label: 'hello' }, { label: 'david' }],
          onChange: arr => console.log(arr),
          inputProps: {
            autoFocus: true,
          },
        }}
        id="messages"
        label="Happy Messages"
        invalid="Your email address is invalid."
        hint="Your email address has an @ character."
        description="Leave some happy messages below."
      />
    </Pane>
  </Pane>
</Playground>