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

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

# FormFieldText
**SUBCATEGORY:** Forms

<hr />

## Text field
### Description
For a single line of text.

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

**Placeholder**

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

**Optional**

<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldText
        {...state}
        id='text-optional'
        labelTag="Tag"
        labelText="Label"
        maxLength={30}
        onChange={e => setState({ value: e.target.value })}
      />
    )}
  </State>
</Playground>

**Helper**

<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldText
        {...state}
        id='text-helper'
        helperText="Helper text"
        labelText="Label"
        maxLength={30}
        onChange={e => setState({ value: e.target.value })}
      />
    )}
  </State>
</Playground>

**Validation**

<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldText
        {...state}
        id='validation'
        error="Notice"
        labelText="Label"
        maxLength={30}
        onChange={e => setState({ value: e.target.value })}
      />
    )}
  </State>
</Playground>

**Disabled**

<Playground>
  <FormFieldText
    disabled
    id='text-disabled'
    labelText="Label"
    maxLength={30}
    value="Text value"
  />
</Playground>

<hr />

## Text field (adjacent)
### Description
For a single line of text.

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

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

<hr />

## Text field (slim)
### Description
For a single line of text. Use where inputs are nested or constrained by layout.

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

<hr />

## Text field (slim, adjacent)
### Description
For a single line of text. Use where inputs are nested or constrained by layout.

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

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

<hr />

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