Native HTML Form Elements

Input Field

Variants

I'm the hint

Password Field
Not available

One Time Password

A one-time code field. autocomplete="one-time-code" lets browsers and password managers offer SMS/generated codes, inputmode="numeric" raises a numeric keyboard on touch devices, and pattern="[0-9]*" restricts the value to digits.

Checkbox Group

What do you wanna do today?

Choose

Not available
Not available

Required — on a checkbox, required means this box must be checked. There is no native "at least one of the group" constraint, so it only fits standalone consent. For a required either/or choice, use radio buttons (see Radio Button Group).

Indeterminate

The indeterminate state has no HTML attribute — it can only be set via JavaScript (el.indeterminate = true). Use the CSS pseudo-class :indeterminate for styling.

Radio Button Group

What do you wanna do today?

Choose

Not available
Not available

Choose (required)

Textarea

Dropdown / Select

Multi-select

Variants — read-only approaches for multi-select

<select> has no native readonly attribute. Three workarounds, each with different trade-offs:

Looks read-only. Selected values are not submitted — disabled options are excluded from the form payload.
Selected values are submitted. But selected options can still be deselected — not truly read-only.
Truly read-only UX. Hidden <input type="hidden"> siblings carry the values so they are submitted.

Advanced Dropdown / Select
Not available

Datalist
You can filter the list items by typing the first characters of the term.

Slider
50
75
Not available
Not available
50

Variants

Datetime local

Email

Telephone

URL

Number

Color
Not available
Not available

File
Not available
Not available

Date

Time

Progress
Not available
Not available
Not available

Variants

Meter
Not available
Not available
Not available

Variants — value zones

The low, high, and optimum attributes define three zones. Browsers colour the bar green, yellow, or red based on how far the current value is from the optimum zone.

Buttons

Default

Disabled

formnovalidate

A submit button with formnovalidate skips this form's native validation, so it submits even while the required field below is empty.

Grouping: ARIA role="group"

An alternative to <fieldset> + <legend>. The group label is provided by an element referenced with aria-labelledby.

Activities

What do you wanna do today?

Choose

Not available
Not available

Required — on a checkbox, required means this box must be checked. There is no native "at least one of the group" constraint, so it only fits standalone consent. For a required either/or choice, use radio buttons (see Radio Button Group).