Skip to content

I want 2D matrix dropdown form inputs  #656

@WebWeWantBot

Description

@WebWeWantBot

Many products require two-dimensional size or variant selection where both dimensions must be chosen together and most combinations are valid. Clothing is a common example: jeans require a girth and a length, bras require a girth and a cup size, and shoes sometimes require a length and a width (as defined in EN 13402-2). The same pattern applies to many other multi-attribute selections in forms, such as shirt size plus color, date components (day plus month), or typography settings (weight plus style).

Today, authors must implement this with two separate <select> elements and JavaScript to coordinate them, which is error-prone, inaccessible, and verbose. I want a native two-dimensional matrix mode for <select> that lets users pick a row and a column value simultaneously, clearly communicating the paired nature of the choice.

<select type="matrix" name="size">
  <option row="XS" col="30">XS / 30</option>
  <option row="XS" col="32">XS / 32</option>
  <option row="S"  col="30">S / 30</option>
  <option row="S"  col="32">S / 32</option>
  <option row="M"  col="32">M / 32</option>
  <option row="M"  col="34">M / 34</option>
</select>

The submitted value could be the concatenation of both axes (e.g., XS/30) or a structured pair, while the UI would render as a matrix or grid so the user can clearly see which combinations are available. Unavailable combinations could be disabled or hidden. This would benefit accessibility by making the relationship between the two dimensions explicit to assistive technologies, and reduce the amount of JavaScript needed for common e-commerce and data-entry scenarios.

--

I want a native HTML input type that accepts a numeric value together with a unit, and automatically converts the entered value to a canonical unit for form submission. Currently, <input type="number"> accepts only a bare number with no unit awareness, forcing authors to either use a separate unit selector or restrict users to a single unit system.Expand commentComment on line R23Resolved

A dedicated amount input type would let users enter values in their preferred units — metric or imperial, for example — while the browser handles conversion and normalization transparently. Authors declare the canonical submission unit using a dedicated unit attribute; value may use any compatible unit as the initial display value, and step defines the stepping granularity in its own unit without implying the submission unit:

<input type="amount" unit="kg" value="10 lb" step="0.5 lb">
<input type="amount" unit="cm" step="1 cm">

The browser would allow the user to type in any compatible unit (e.g., pounds when unit="kg"), then normalize and submit the value in the declared canonical unit. When value is omitted the control still uses the declared unit for parsing, validation, and submission. Compound measurements like 5 ft 10 in should also be supported for height, distance, and similar fields.

This builds on the idea of an amount element for localizing numeric data (see related link) but focuses on form input and submission rather than display-only rendering. Benefits include:

  • Users in different locales can enter values in their familiar units without manual conversion.
  • Authors can declare a canonical submission unit without writing conversion logic.
  • Accessibility is improved because the semantic meaning of the number (quantity + dimension) is conveyed natively to assistive technologies.
  • Validation becomes more meaningful: the browser can reject out-of-range values regardless of which unit the user typed.

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions