Input fields
Input controls that enable the user to interact with and input content or data.
Resources
Types
Variations
Help text can be introduced when there is a need to provide additional guidance on the input field. Character counter can be added to text field or text area with character limit.
States
Behaviour
Currency dropdown
When user expand the dropdown in currency or country selection, they will be able to scroll down the list or search from the list.
Text area
Text area should have a maximum height of 20vh. There are two ways to adjust the sizing of the text — manual resizing and dynamic resizing.
Manual resizing
Users may drag the handle/knob on the bottom right corner to resize the box.
The scrollbar appears when characters hit longer than the text area.
Dynamic resizing
The text area will automatically extend. No handler/knob for resizing.
The scrollbar will appear upon reaching max height (20vh), and when the characters are longer than the text area.