Logomark for Development Bank of Singapore (DBS), a bright red shape resembling a flowerDBS Digital
Design System

Input fields

Input controls that enable the user to interact with and input content or data.

What’s here

  1. Resources
  2. Types
  3. Variations
  4. States
  5. Behaviour

Resources

  • Input fields on Figma
  • Input fields API

Types

Media is restricted, please login to view

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.

Media is restricted, please login to view

States

Media is restricted, please login to view

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.

Media is restricted, please login to view

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.

Media is restricted, please login to view

The scrollbar appears when characters hit longer than the text area.

Media is restricted, please login to view

Dynamic resizing

The text area will automatically extend. No handler/knob for resizing.

Media is restricted, please login to view

The scrollbar will appear upon reaching max height (20vh), and when the characters are longer than the text area.

Media is restricted, please login to view

Loading...