Form Elements

Examples and usage guidelines for form control styles, layout options, and custom components.

Basic Form Elements

Text Input

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

Password

Number Input

URL

Date

Time

Color Picker

Textarea & Select

Textarea

Select

Multiple Select

File Input

Multiple Files

Range

Checkboxes

Default checkbox

Checked checkbox

Disabled checkbox

Inline Checkboxes

1

2

3

Radio Buttons

Default radio

Second default radio

Disabled radio

Inline Radio Buttons

1

2

3

Switches

Default switch checkbox

Checked switch checkbox

Disabled switch checkbox

Disabled checked switch

Input Groups

@

@example.com

$ .00

Form Layouts

Email

Password

Radios

First radio

Second radio

Third disabled radio

Checkbox

Example checkbox

Form Validation

First name

Looks good!

Last name

Looks good!

Username

@

Please choose a username.

City

Please provide a valid city.

State

Please select a valid state.

Zip

Please provide a valid zip.

Agree to terms and conditions

You must agree before submitting.

Floating Labels

Email address

Password

Comments

Works with selects

Input Sizing

Complete Form Example

Personal Information

First Name

Last Name

Email

Phone

Additional Information

Company

Position

Department

Start Date

Preferences

Notification Settings

Email notifications

SMS notifications

Push notifications

Bio