react-common/lib/components/TextInput/TextInput.mdx

---
name: TextInput
route: /components/textinput
menu: Components
---

import { Playground, Props, Link } from 'docz'
import TextInput from './TextInput'

# TextInput

Component for inputting textual values.

<Playground>
  <TextInput label="Username" placeholder="johndoe" hint="the name you use to log in" />
</Playground>

## 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>
  <form>
    I am <span style={{ display: 'inline-block', width: '16rem', }}><TextInput label="Full name" hint="given and family name" /></span> and I live in <span style={{ display: 'inline-block', width: '24rem', }}><TextInput label="Address" hint="city, state and country" /></span>.
  </form>
</Playground>

### 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>
  <form
    style={{ display: 'grid', gridTemplateColumns: '4fr 4fr 5fr', gap: '1rem', }}
  >
    <div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
      <TextInput label="Address line 1" hint="unit/house number, building" />
    </div>
    <div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
      <TextInput label="Address line 2" hint="street, area" />
    </div>
    <div>
      <TextInput size="large" label="City/Town" />
    </div>
    <div>
      <TextInput size="large" label="State/Province" />
    </div>
    <div>
      <TextInput size="large" label="Country" hint="abbreviations are accepted" />
      <small>
        Consult the <a href="#">fees table</a> for shipping fee details.
      </small>
    </div>
  </form>
</Playground>

## See Also

- <Link to="../select">Select</Link> for a graphically-similar component suitable for selecting more values.