---
name: InputField
menu: Components
route: /components/inputfield
---

import { InputField } from './';
import { TextField } from '../TextField';
import { Pane } from '../Pane';
import { Playground } from 'docz';

# InputField

An input field wraps a single input component with a label, description, hint and provides validation control.

## Import

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

## Example

<Playground>

  <Pane spacing={{ py: { sm: 4 } }} radius="2" background="gray" hue="0">
    <Pane spacing={{ mx: { sm: 4 } }}>
      <InputField 
        input={(props) => <TextField {...props} />}
        inputProps={{
          fullWidth: true,
          placeholder: "Enter your email address"
        }}
        id="username"
        label="Username"
        description="Your username is your registered email address."
        invalid="Your email address is invalid."
        hint="Your email address has an @ character."
      />
    </Pane>
    <Pane spacing={{ mx: { sm: 4 }, mt: 4 }}>
      <InputField 
        input={(props) => <TextField {...props} />}
        inputProps={{
          fullWidth: true,
          type: 'password',
          placeholder: "Enter your password"
        }}
        id="password"
        label="Password"
        description="Your password contains at least 8 characters."
      />
    </Pane>
  </Pane>
</Playground>