---
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',
  }}
>
  <Box direction='column'>
    <Input mb='24px' placeholder='Name' />
    <Input mb='24px' value='72' placeholder='Age' />
    <Input mb='24px' disabled placeholder='Email' />
    <Input mb='24px' disabled value='4695710331' placeholder='Phone' />
  </Box>
</Playground>
