Best practices

  • Use placeholder copy to display the expected shape of data. For example, for a field that asks for a twitter handle, a placeholder of '@kalohq' rather than 'your twitter handle' is better.


A basic input
<Input placeholder="Your first name" />

Well input

A highlighted input that turns into a normal input on focus
<Input icon="search" placeholder="Location" theme="well" />

Disabled Input

An input that is disabled and doesn't allow user manipulation
<Input disabled={true} placeholder="Your twitter handle" />

Readonly Input

An input that is readonly
<Input readonly={true} value="Project 101" />


Inputs can be one of three sizes

<span> <Input placeholder="Small input" size="small" /> <br /> <Input placeholder="Medium input" size="medium" /> <br /> <Input placeholder="Large input" size="large" /> </span>

With addon before

Inputs can have addons to display contextual hints to the user
<Input addonPrefix="$" placeholder="0.00" size="medium" />

With addon after

Likewise, inputs can have addons after the main input
<Input addonSuffix="" placeholder="0.00" size="medium" />

With valid status

Displays an input with a valid status
<Input placeholder="" valid={true} />

With invalid status

Displays an input with an invalid status
<Input placeholder="" valid={false} />