Complete Form Elements

Standard Form Elements

Username (input type="text")

All Input Types

input type="button"

input type="checkbox"

Subscribe to newsletter

input type="color"

input type="date"

input type="datetime-local"

input type="email"

input type="file"

input type="hidden" (not visible)

Hidden field - used to pass data without displaying it

input type="image"

input type="month"

input type="number"

input type="password"

input type="radio"

Male

Female

input type="range" 50

input type="reset"

input type="search"

input type="submit"

input type="tel"

input type="text"

input type="time"

input type="url"

input type="week"

Multi Select Input

Select Multiple Options

Hold Ctrl (Windows) or Command (Mac) to select multiple options

Disabled Multi Select Input

Select Multiple Options (Disabled)

This select input is disabled and cannot be interacted with

Custom Toggle Switch

Toggle Switch with Custom Colors

Toggle between danger (red) and success (green) states

On/Off Toggle Switch

Toggle Switch with On/Off Labels

ON OFF

Toggle switch with ON/OFF text indicators

Searchable Multi Select

Select multiple items by typing to filter

You can type to filter items. Click an item to select it, and click the × to remove it.

Searchable Multi Select

Select multiple items (options embedded in input)

Filter and select options. Click × to remove, or use "Remove All".

Tags Displayed Above Input

Type a tag and press Enter. Tags appear above the input box.

Tags are displayed above the input field.

Tags Displayed Inside Input

Type a tag and press Enter. Tags appear inside the input box.

Tags are shown inline with the input field.

Select Range

Min:

Max:

File Uploads

Single File Upload

Click to upload or drag and drop

PNG, JPG, PDF (max 10MB)

Selected file:

Multiple Files Upload

Click to upload or drag and drop

PNG, JPG, PDF (max 10MB each)

Date Selections

Date Selection

Basic Date

Date with Time

Time & Range Selection

Time

Date Range

Select start and end dates

Single Calendar

Select Date Range

Double Calendar

Select Date Range

Masking Inputs

Phone & Tax ID Formats

Phone Number

Tax ID

Product Key

SSN Formats

SSN (with slash)

SSN (with letters)

Date Format

Form Elements Examples

1. Input

Username

2. Label

Email Address

3. Select

Country

4. Textarea

Message

5. Button

6. Fieldset & Legend

Personal Information

First Name

Last Name

7. Datalist

Choose a browser

8. Output

9. Option & Optgroup

Choose a car

10. Multiple Files Upload

Select Multiple Files

Dual Form Display

Both forms displayed side by side

User Registration

Please fill in the form to create an account

Full Name

Email Address

Password

Remember me

Account Type

About You

User Registration

Please fill in the form to create an account

Full Name

Email Address

Password

Account Type

Remember me

Date of Birth

Upload File

About You

Tools

Admin User

Complete Form Elements

Standard Form Elements

All Input Types

Multi Select Input

Disabled Multi Select Input

Custom Toggle Switch

On/Off Toggle Switch

Searchable Multi Select

Searchable Multi Select

Tags Displayed Above Input

Tags Displayed Inside Input

Select Range

File Uploads

Date Selections

Date Selection

Time & Range Selection

Single Calendar

Double Calendar

Masking Inputs

Phone & Tax ID Formats

SSN Formats

Form Elements Examples

1. Input

2. Label

3. Select

4. Textarea

5. Button

6. Fieldset & Legend

7. Datalist

8. Output

9. Option & Optgroup

10. Multiple Files Upload

Dual Form Display

User Registration

User Registration