---
name: TextInput
---

import { TextInput } from '../../../../react-common/src'
import Playground from '../../components/Playground/Playground'
import Props from '../../components/Props/Props'
import Header from '../../components/Header/Header'

<Header of="TextInput" />

<Playground
  components={{ TextInput: Index }}
  code={`
    <TextInput
      label="Username"
      placeholder="johndoe"
      hint="the name you use to log in"
    />
  `}
/>

## Props

<Props of="TextInput" />

## Usage Notes

The component will behave as `block`, i.e. it takes the remaining of the horizontal space.
To use the component together with layouts, see the following examples.

### Inline

The components are surrounded by `inline-block` elements. These surrounding elements have specified widths, which could
act as guide to the user on how long the expected input values are.

<Playground
  components={{ TextInput: Index }}
  code={`
    <form>
      I am <span style={{ display: 'inline-block', width: '12rem', verticalAlign: 'bottom', }}><TextInput label="Full name" hint="given and family name" /></span> and I live in <span style={{ display: 'inline-block', width: '16rem', verticalAlign: 'bottom', }}><TextInput label="Address" hint="city, state and country" /></span>.
    </form>
  `}
/>

### Grid

It is advisable to put surrounding elements instead of the `TextInput` components themselves as children of the
element specified as `grid`. This is to be able to add complementing content to the components, if for example there are
some content that is best displayed outside the component instead of putting in the `hint` prop.

<Playground
  label="Example shipping address form"
  components={{ TextInput: Index }}
  code={`
    <form
      style={{ display: 'grid', gridTemplateColumns: '4fr 4fr 5fr', gap: '1rem', }}
    >
      <div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
        <TextInput alternate border label="Address line 1" hint="unit/house number, building" />
      </div>
      <div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
        <TextInput alternate border label="Address line 2" hint="street, area" />
      </div>
      <div>
        <TextInput alternate border size="large" label="City/Town" />
      </div>
      <div>
        <TextInput alternate border size="large" label="State/Province" />
      </div>
      <div>
        <TextInput alternate border size="large" label="Country" hint="abbreviations are accepted" />
        <small
          style={{
            display: 'block',
            marginTop: '0.5em',
            lineHeight: '1.5em',
          }}
        >
          Consult the <a href="#">fees table</a> for shipping fee details.
        </small>
      </div>
    </form>
  `}
/>

## See Also

- [Select](./Select) for a graphically-similar component suitable for selecting more values.
