Basic Inputs

Standard text input variations

Input Types

Different HTML5 input types

Input Sizes
Input Sizing

Small, default, and large input sizes

Select Sizing

Small, default, and large select sizes

Date & Time Inputs
Date Inputs

Native HTML5 date input types

Time & Other Inputs

Time, color, and range inputs

0 1 2 3 4 5
Textarea & Select
Textarea

Multi-line text input

Select Elements

Dropdown select variations

Hold Ctrl/Cmd to select multiple
Checkboxes & Radios
Checkboxes

Checkbox input variations

Default Checkboxes
Inline Checkboxes
Indeterminate Checkbox
Radio Buttons

Radio input variations

Default Radios
Inline Radios
Button Group Radios
Switches
Toggle Switches

Switch input variations

Settings Style Switches

Common settings toggle patterns

Email Notifications
Receive email updates about your account
Push Notifications
Receive push notifications on your device
Two-Factor Authentication
Add an extra layer of security
Marketing Emails
Receive updates about new features
Input Groups
Basic Input Groups

Inputs with prepended/appended content

@
@example.com
$ .00
Message
Button Input Groups

Input groups with buttons

Floating Labels
Floating Label Inputs

Form inputs with floating labels

Floating Textarea & Select

Textarea and select with floating labels

File Inputs
File Input Variations

Different file input styles

Custom File Input

Styled file input with input group

JPG, PNG or GIF. Max size 2MB
Form Help Text & Labels
Help Text

Various ways to display help text

Must be 8-20 characters long.
@
Only lowercase letters and numbers allowed.
Label Variations

Different label styling options

Forgot password?
Validation States
Input Validation

Valid and invalid input states

Looks good!
Please provide a valid value.
Good selection!
Please select an option.
Checkbox & Radio Validation

Validation for checkboxes and radios

You accepted the terms!
You must agree before submitting.
Great choice!
Please select an option.
Disabled Forms
Disabled Fieldset

Disable all form elements at once

Disabled fieldset example
Readonly Form

Display form data in readonly mode

Software developer with 10+ years of experience in building web applications.