---
name: Input
route: /components/common/forms/form-input
menu: Forms
edit: false
---

import { Playground, Props } from 'docz'
import { State, Toggle } from 'react-powerplug'
import FormInput from './form-input'

# FormInput
**SUBCATEGORY:** Forms

<hr />

## Input
### Description
Form input for a single line text or numbers

**Default**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormInput
        {...state}
        id='input'
        onChange={e => setState({ value: e.target.value })}
      />
    )}
  </State>
</Playground>

**Placeholder**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormInput
        {...state}
        id='input-placeholer'
        placeholder="Text placeholder"
        onChange={e => setState({ value: e.target.value })}
      />
    )}
  </State>
</Playground>

**Validation**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormInput
        {...state}
        id='input-validation'
        error="Notice"
        onChange={e => setState({ value: e.target.value })}
      />
    )}
  </State>
</Playground>

**Disabled**
<Playground>
  <FormInput
    disabled
    id='input-disabled'
    value="Text value"
    onChange={e => setState({ value: e.target.value })}
  />
</Playground>

## Properties
<Props of={FormInput} />