---
name: 3.5 - InputText
route: /components/input-text
order: 80
menu: 3. Components
---

# InputText

import { Playground, PropsTable } from 'docz'
import { FormRow, InputText } from '../'

## Properties

<PropsTable of={InputText} />

## Basic usage

<Playground>
  <InputText
    placeholder="Email"
  />
</Playground>

## Sizes

<Playground>
  <FormRow>
    <InputText
      placeholder="Email"
      size="small"
    />
  </FormRow>
  <FormRow>
    <InputText
      placeholder="Email"
      size="medium"
    />
  </FormRow>
  <FormRow>
    <InputText
      placeholder="Email"
      size="large"
    />
  </FormRow>
</Playground>

## Align text on center

<Playground>
  <InputText
    placeholder="Email"
    textCenter
  />
</Playground>

## Read only

<Playground>
  <InputText
    placeholder="Email"
    readOnly
  />
</Playground>

## Disabled

<Playground>
  <InputText
    placeholder="Email"
    disabled
  />
</Playground>

## Hint

<Playground>
  <InputText
    placeholder="Password"
    hint="Lorem ipsum dolor"
  />
</Playground>

## onChange

<Playground>
  <InputText
    placeholder="Email"
    onChange={text => alert(text)}
  />
</Playground>
