---
name: TextInputField
route: /components/textinputfield
menu: Components
---

import { Playground, PropsTable } from 'docz';
import TextInputField from './TextInputField';

# TextInputField

The `TextInputField` component combines a `TextInput` with a label and optional hint.

## Usage

```javascript
import { TextInputField } from '@snowpak/powpow';

export default () => (
  <TextInputField
    label="First Name"
    textInputOptions={{
      placeholder: 'Why is text input?',
    }}
  />;
);
```

## Props

<PropsTable of={TextInputField} />

## Examples

<Playground>
  <TextInputField
    label="First Name"
    hint="This is a hint"
    textInputOptions={{
      placeholder: 'Why is text input?',
    }}

    data-cy="sp-textInputField"

/>

</Playground>

### With error message

<Playground>
  <TextInputField
    label="First Name"
    hint="This is a hint"
    errorMessage="This field is required."
    textInputOptions={{
      placeholder: 'Why is text input?',
      isInvalid: true
    }}

    data-cy="sp-textInputField"

/>

</Playground>