### 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