Text Input and related Components

There are some instances for e.g. in a form which may require users to enter both short and long form content. In such cases, allow the size of the text input box to reflect the length of the content the user is expected to enter.

Open Text Field

Active

Disabled

Error

Dropdown

There are three different variants of dropdowns that support various kinds of functionality—dropdown and multiselect. Dropdowns can be used in forms on full pages, in modals, or on side panels. The dropdown component is used to filter or sort contents on a page. It is a stylized version of the select component, and can be styled as needed.

Single select Dropdown

Multi select Dropdown

Dropdown with typeahead

Different states of Dropdowns

Active

Disabled

Error

Date Picker

Use date and time pickers when you are asking the user for a time or date, or for scheduling tasks.

Single Selection


calendar single value is: {{ calendar.singleValue }}

Range Selection


calendar range value is: {{ calendar.rangeValue }}

Month Selection


calendar month value is: {{ monthCalendar.monthValue }}

Control Label and Simplified Range

Reset Selection

Dropdown with Typeahead - Multiselect

Multi select dropdown list is used when a user wants to store multiple values for the same record. You can create custom categories of either dropdown list or multi select dropdown list and define items in each category.

Search Field

Search offers users a way to explore a website or application using keywords. Search can be used as the primary means of discovering content, or as a filter to aid the user in finding content.

Active

Disabled

Error