Inputs · Forms

Inputs in Forms: 8 designs — Checkbox & Radio Group · File Upload / Dropzone · Number Field · Select / Combobox

RTL VerifiedLTR Verified Forms

Checkbox & Radio Group

Checkboxes accumulate, radios exclude — and the requirement is the group's, so it is stated where the role's semantics accept it

Intermediate

Code Prompt

RTL VerifiedLTR Verified Forms

File Upload / Dropzone

A dropzone whose native input is present, not hidden — so the keyboard reaches it and a screen reader names it, and the bar is a native element

Intermediate

Code Prompt

RTL VerifiedLTR Verified Forms

Number Field

A number field with its bounds and step — what you add and step is a number, what identifies is text

Beginner

Code Prompt

RTL VerifiedLTR Verified Forms

Select / Combobox

A native list with no JavaScript — the placeholder shows but cannot answer, so the constraint genuinely fails on it

Beginner

Code Prompt

RTL VerifiedLTR Verified Forms

Slider / Range

A native range kept in its own direction — never flipped by a trick, and the visible readout hidden from AT because the control already announces its value

Intermediate

Code Prompt

RTL VerifiedLTR Verified Forms

Text Field

Six states of one field — each a real attribute a screen reader can hear, not a class that only colours

Beginner

Code Prompt

RTL VerifiedLTR Verified Forms

Textarea

A multiline field whose counter reads the value length in the same unit maxlength stops typing by

Intermediate

Code Prompt

RTL VerifiedLTR Verified Forms

Time Field

A time field with its bounds and step — what happens during the day is a time, what adds up is a duration

Beginner

Code Prompt

Inputs · Forms

Designs

Checkbox & Radio Group

File Upload / Dropzone

Number Field

Select / Combobox

Slider / Range

Text Field

Textarea

Time Field