{{> layouts/head pageTitle="Form Elements" }}
{{> layouts/header }} {{> layouts/sidebar activeMenu="forms" activePage="form-elements" }}
Form Elements
Examples and usage guidelines for form control styles, layout options, and custom components.
Dashboard
Forms
Form Elements
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
Choose...
Option 1
Option 2
Option 3
Multiple Select
Option 1
Option 2
Option 3
Option 4
Option 5
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
Button
Search
Clear
Form Layouts
Email
Password
Radios
First radio
Second radio
Third disabled radio
Checkbox
Example checkbox
Sign in
Form Validation
First name
Looks good!
Last name
Looks good!
Username
@
Please choose a username.
City
Please provide a valid city.
State
Choose...
California
New York
Texas
Please select a valid state.
Zip
Please provide a valid zip.
Agree to terms and conditions
You must agree before submitting.
Submit form
Floating Labels
Email address
Password
Comments
Open this select menu
One
Two
Three
Works with selects
Input Sizing
Large select
One
Two
Three
Default select
One
Two
Three
Small select
One
Two
Three
Complete Form Example
Personal Information
First Name
Last Name
Email
Phone
Additional Information
Company
Position
Department
Choose department...
Engineering
Marketing
Sales
Human Resources
Finance
Start Date
Preferences
Notification Settings
Email notifications
SMS notifications
Push notifications
Bio
Save Changes
Reset
Cancel
{{> layouts/footer }}
{{> layouts/scripts }}