TextInput
Open in Storybook Open in Figma
Input fields behave the same on white and grey background:
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
- You find guides for placeholders in the section ‘UI text’..
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 (#537091). - 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:
Rules For Developers
- You can set the minimum amounts of lines of text shown (at any case) using the
rowsprop - You can set the component to automatically grow/shrink as user types using the
autoGrowprop (trueby default) - You can limit the maximum height of the component using the
maxHeightprop