InputField

Input fields allow users to input text when required. They contain placeholder text to help user understand the format of the input required like name or email. They are used in login, forms, chat etc.

Nude Input Field

Usage
Anatomy
Specs

Nude input fields are ones without any baseline or container. They have input hint but no field title. They are used when there is only one text field in the screen, and lot of white space for the visibility of a single text field. An optional icon button is used in line as complimentary action to the input field in chat.

usage example image

Ghost Input Field

Usage
Anatomy
Specs

Ghost input fields are ones with baseline but no container. They have field title, input hint, text clear icon and error text. They are used when there are multiple input fields required in a screen. They can be stacked together and made to be used in a crowded layout.

usage example image

States

example state image

Default

example state image

Error

Filled Input Field

Usage
Anatomy
Specs

Filled input fields are with container but no baseline. They have icon complementing the field type and used in search, or any place where higher emphasis is required. It can be used single(in search or poi notes) or stacked with multiple(in gosend) depending on requirements.

usage example image

States

example state image

Default

example state image

Error

Phone Input Field

Usage
Anatomy
Specs

Phone input fields are ones with baseline but no container. They have country code selector button, field title, input hint, text clear icon and error text. They are used only for phone number fields. They can be used single or can be stacked together and are made to be used alone or in a crowded layout.

usage example image

PIN Input Field

Usage
Anatomy
Specs

Pin input fields are ones without any baseline or container. They have a nude button on right and a field title. They are used to take OTP & passwords as input from the users

usage example image

Currency Input Field

Usage
Anatomy
Specs

Currency input fields contain large text for more visibility are without any baseline or container. They are only used for currency entry in gopay

usage example image