---
name: Input
route: /Input
menu: components
---

import { Playground, Props } from 'docz'
import { Input } from './'
import { Spacer } from '../Spacer'

# Input

<Props of={Input} />

## Usage

<Playground
  style={{
    backgroundColor: 'var(--colorGrayUltraLight)',
    margin: '-2em',
    padding: '2em',
    width: 'auto',
    display: 'flex',
    flexDirection: 'column',
  }}
>
  <div style={{ display: 'flex', flexDirection: 'column' }}>
    <Input placeholder='Name' />
    <Spacer mb='24px' />
    <Input value='72' placeholder='Age' />
    <Spacer mb='24px' />
    <Input disabled placeholder='Email' />
    <Spacer mb='24px' />
    <Input disabled value='4695710331' placeholder='Phone' />
    <Spacer mb='24px' />
  </div>
</Playground>
