---
name: Input
menu: Atoms
route: /atoms/Input
---

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


# Inputs

This component renders an HTML `<input>` and passes along all props.

## API
<Props of={Input} />

## Normal


<Playground>
		<Input />
</Playground>

## Number only

<Playground>
		<Input validation="onlyNumber" onchange={e => console.log('event', e.target.value)} />
</Playground>

## Text only

<Playground>
		<Input validation="alphanumeric" onchange={e => console.log('event', e.target.value)} />
</Playground>

## Error

<Playground>
	<Input helperActive={true}  placeholder={'error'} labelRight={{text: "bla.ai", color: "#ff5c39"}}
		icon={{ name: "ErrorOutline", color: "#ffff" }} />
</Playground>

## Password

<Playground>
	 <Input  type="password"/>
</Playground>

## Label
<Playground>
	<Input helperActive={true} labelRight={{text: "label.com", color: "#ff5c39", onclick: ()=> console.log('sup')}} icon={{ name: '', color: '#ffff'}} />
</Playground>