Multiple Sizes Input Fields

Multiple sizes input fields accept text and have flexibility on it's height to give users a cue of how much text they can add

Main Presentation

The basic structure of an input field is its name, the input field itself and a bottom helper. We can set a fixed height for 1 line input field, let it be fully flexible, or define a maximum height for it.

1 line Input Field

Flexible Height Input Field

Limited Height Input Field

Error State

Figma File for Specification

Related Content

Share Components

Search Input Field

Modular Components and Atomic Design