Go to Content
Design System
Playroom Storybook
🌹 Graz - George Design System stands in solidarity with the victims and families affected by the tragic school shooting in Graz. Our hearts go out to all those impacted by this senseless act of violence.

TextInput

Open in Storybook Open in Figma

Input fields behave the same on white and grey background:

Loading demo…
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

Open in Figma

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