Native Form Elements Reloaded

Edge and IE are finally dead! Let's move for(m)ward and fix the web with fast, secure and beautiful web applications. Form elements are key for applications and accessibility comes for free!

Re-explore the possibilities of data input in the web. I'm sure we can get rid of some half-baked input components out there.

Streamline typography (tbd) Basic borders and padding (tbd) Basic design

For more details please visit MDN The native form widgets

Input Field

Input Standard

Input Standard (pre-filled)

Input (required)

Input (read-only)

Input (disabled)

Variants

Input Standard with Placeholder

Input Standard with hint I'm the hint

Input Standard with Pattern

Password Field

Password Standard

Not available

Password (required)

Password (read-only)

Password (disabled)

One Time Password

Some text

OTP

Checkbox Group

What do you wanna do today?

Choose

Option 1

Option 2 (pre-checked)

Not available

Option 5 (disabled)

Choose (required)

Yes

Radio Button Group

What do you wanna do today?

Choose

Option 1

Option 2 (pre-checked)

Not available

Option 5 (disabled)

Choose (required)

Yes

Textarea

Text Area

Text Area (pre-filled)

Text Area (required)

Text Area (read-only)

Text area content

Text Area (disabled)

Text Area with Placeholder

Dropdown / Select

Select

Select (pre-selected)

Select (required)

Select (read-only-ish)

Select (disabled)

Select (multiple)

ToDo

Advanced Dropdown / Select

Select

Select (pre-selected)

Select (required)

Not available

Select (disabled)

Select (partly disabled)

Datalist

Select your Country You can filter the list items by typing the first characters of the term.

Slider

Not available

Datetime local

Datetime

Datetime (pre-filled)

Datetime (required)

Datetime (read-only)

Datetime (disabled)

Checkbox Group

What do you wanna do today?

Choose

Option 1

Option 2 (pre-checked)

Not available

Option 5 (disabled)

Choose (required)

Yes

Checkbox Group

What do you wanna do today?

Choose

Option 1

Option 2 (pre-checked)

Not available

Option 5 (disabled)

Choose (required)

Yes