Basic Forms

Company
First Name Last Name
State New York Washington Florida Password Disabled

Advanced Forms

State {{ state.name }} Population: {{ state.population }} Username Mobile Phone Email Address Birthdate Click on the icon to the right for a Datepicker

Form Prefix & Suffix

Add a Prefix and Suffix to an input field, from text to icons or symbols, anything and any element can be set as prefix or suffix.

Prefix Icon Suffix Icon https://   Prefix + Suffix

Form Hint Label

When you need to display additional information to the user you can use Hint Labels to display information appropriately.

Email Address Domain Name http://{{ hintLabelInputRef.value || "company" }}.example.com Dynamic Hint Label Try to type in more than 10 letters {{ hintLabelInputLengthRef.value.length }}/10

Form Select

A intuitive select component that displays the current position you are at and has smooth animations.

Favorite fruit Apples Peaches Bananas Mango Cucumber Themeable Colors Primary Color Accent Color Warn Color

Form Datepicker

A Material styled Datepicker that allows for easy selection of any date with any format.

Date Picker Example Date Format: dd/mm/yyyy

Form Slider

An component similiar to the range input with better usability and drag & drop + keyboard support.

Form Radio Button

When you need a user to decide between multiple options and have him only choose one, you can use a radio button.

Apples Peaches Primary Color Accent Color Warn Color

Form Slide Toggle

Allow the user to slide toggle an option or a value. You can either click or you can drag & drop the slide to change its state.

Click Me Enable I Agree
Primary Color Accent Color Warn Color

Form Checkbox

Allow for simple selecting and deselecting of options.

Stay signed in Indeterminate Align end

Form Checkbox Theming

Style checkbox elements with the Theme API.

Primary Color Accent Color Warn Color