Text inputs

Text

URL

Telephone

Password

Number

Date and time

Date

Month

Week

Time

Color

Disabled states

Validation states

Input with success

Success! You've done it.

Example help text that remains unchanged.

Input with warning

Shucks, check the formatting of that and try again.

Example help text that remains unchanged.

Input with danger

Sorry, that username's taken. Try another?

Example help text that remains unchanged.

Form controls

Email address We'll never share your email with anyone else.

Password

Example select

Example multiple select

Example textarea

File input This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.

Radio buttons

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Check me out

Input groups

@example.com

Your vanity URL

https://example.com/users/

$ .00

$ 0.00

Rating

Rate: {{ rate1 }}

Rate: {{ rate2 }}

Selects

Example select

Example multiple select