Input

CSSStepper: JSinput.js

The input utility styles any native control — input, select, textarea, date, file — with one class. Selects and date fields get the correct chrome automatically.

Inputs, selects, dates & textareas

Toggle themeOpen ↗

components/input.html

<div class="grid max-w-md gap-5">
  <div class="input-group">
    <label class="label">Full name</label>
    <input class="input" type="text" placeholder="Jane Doe" />
  </div>

  <div class="input-group">
    <label class="label" data-optional>Company</label>
    <input class="input" type="text" placeholder="Acme Inc." />
  </div>

  <div class="input-group">
    <label class="label">Currency</label>
    <select class="input">
      <option>US Dollar</option>
      <option>Euro</option>
      <option>Iraqi Dinar</option>
    </select>
  </div>

  <div class="input-group">
    <label class="label">Date</label>
    <input class="input" type="date" />
  </div>

  <div class="input-group">
    <label class="label">Notes</label>
    <textarea class="input" rows="3" placeholder="Anything to add?"></textarea>
  </div>

  <div class="input-group">
    <label class="label">Account number (digits only, max 8)</label>
    <input
      class="input"
      type="text"
      inputmode="numeric"
      placeholder="Try typing letters — they're blocked"
      data-validate
      data-validate-type="integer"
      data-validate-max-length="8"
    />
  </div>

  <div class="input-group">
    <label class="label">Amount</label>
    <input class="input" type="text" inputmode="decimal" disabled value="Disabled" />
  </div>
</div>

Building blocks

Class / attribute	Role
input	Applies the field styling to a native control (or a wrapper).
input-group	Vertical label + field pair.
label	The field label.
label + data-optional	Appends an “(optional)” suffix (text from the --optional-title token).
input-dropzone	Dashed file-drop area.
input-hidden	Visually-hidden but accessible input.

<div class="input-group">
  <label class="label" data-optional>Company</label>
  <input class="input" type="text" placeholder="Acme Inc." />
</div>

Select & date chrome

select, date, datetime-local and month fields draw their dropdown/calendar icon from the --select-bg / --date-bg tokens set in the head. Keep those in your head setup or the icons won’t appear.

Formatted date inputs (element.js)

element.js automatically upgrades native date / datetime-local / month inputs: it shows the value in the design system’s date format with a dd/mm/yyyy placeholder, while keeping the real native picker (showPicker). Add data-input-date to opt out of the display swap and only get click-to-open-picker. This is why the date field above reads as formatted text.

Number stepper

JavaScriptinput.js

Wrap a number input with .number-field and add minus/plus buttons. input.js wires the buttons, respecting the input’s min, max and step, and fires input + change events.

Number stepper

Toggle themeOpen ↗

components/number-field.html

<div class="max-w-60">
  <div class="number-field">
    <button type="button" data-number-stepper-minus aria-label="Decrease">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M5 12l14 0" />
      </svg>
    </button>

    <input type="number" value="1" min="0" max="99" step="1" aria-label="Quantity" />

    <button type="button" data-number-stepper-plus aria-label="Increase">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M12 5l0 14" />
        <path d="M5 12l14 0" />
      </svg>
    </button>
  </div>
</div>

<div class="number-field">
  <button type="button" data-number-stepper-minus aria-label="Decrease"><!-- − icon --></button>

  <input type="number" value="1" min="0" max="99" step="1" />

  <button type="button" data-number-stepper-plus aria-label="Increase"><!-- + icon --></button>
</div>

Selector	Role
.number-field	Wrapper the stepper looks for.
[data-number-stepper-minus]	Decrement button.
[data-number-stepper-plus]	Increment button.
input[type="number"]	The value; min / max / step are respected.
[data-number-stepper-created]	[auto-set] [internal] processing guard.

Dynamic fields

Steppers added after load aren’t wired automatically — call createNumberSteppers() again (already-wired fields are skipped).

Input validation

JavaScriptvalidate.js

Add data-validate to restrict what can be typed into a field (it blocks disallowed beforeinput, so bad characters never appear). The “Account number” field above only accepts digits, up to 8 of them.

<input
  class="input"
  data-validate
  data-validate-type="integer"
  data-validate-max-length="8"
/>

Attribute	Effect
data-validate	Enable validation on this field.
data-validate-type	Allowed characters: number, integer, letter, letter-lower, letter-upper, letter-number, letter-number-symbol.
data-validate-max-length	Maximum length.
data-validate-min / data-validate-max	Numeric bounds (number/integer types).
data-validate-max-floating-point	Max decimal places (number type).
data-validate-allow-space	Don’t count spaces toward length / patterns.

Note

Validation is input-time only (it prevents bad keystrokes). Pair it with real form validation on submit for completeness.