TextInput

Input fields behave the same on white and grey background:

Loading demo…

HINT To disable an input field, set the disabled attribute.

HINT Make sure the input field contains a proper default value or placeholder text as specified in the design.

Rules For Copywriters

Rules For Designers

Input fields are $color-white (#ffffff) and feature a 1px $color-gray-300 (#a3b5c9) border.
Input field height is 40px (including the border).
Placeholder text is colour $color-gray-400 (#537090).
On hover, the border changes to a 60% $color-blue-300 (#135ee2).
On focus, a 2px $color-blue-200 (#a2ceff) box shadow is added.
Horizontal padding of input fields (and input group addons, see below) is 10px left/right.
Disabled inputs have a 80% $color-gray-300 (#a3b5c9) for text and border colour, and a $color-gray-100 (#eef0f4) background.

TextareaInput

Use TextareaInput for multi-line text input:

Loading demo…

Rules For Developers

You can set the minimum amounts of lines of text shown (at any case) using the rows prop
You can set the component to automatically grow/shrink as user types using the autoGrow prop (true by default)
You can limit the maximum height of the component using the maxHeight prop

When the user enters a value, it can be transformed using a function passed in processValue prop before the component reacts to it.

This can be used to effectively disable input of some characters.

Loading demo…