Input

Text-style inputs styled with .re-input. Native types, keyboard, autocomplete, and validation all stay native.

Basic types

Name Email We use this to contact you. Search Password Number

Live example

<form class="grid" id="basic-form">
  <label class="re-field">
    <span class="re-field__label">Name</span>
    <input
      class="re-input"
      name="name"
      type="text"
      id="input-text"
      placeholder="Ada Lovelace"
    />
  </label>
  <label class="re-field">
    <span class="re-field__label">Email</span>
    <input class="re-input" name="email" type="email" id="input-email" required />
    <span class="re-field__hint">We use this to contact you.</span>
  </label>
  <label class="re-field">
    <span class="re-field__label">Search</span>
    <input class="re-input" name="q" type="search" id="input-search" />
  </label>
  <label class="re-field">
    <span class="re-field__label">Password</span>
    <input class="re-input" name="password" type="password" id="input-password" />
  </label>
  <label class="re-field">
    <span class="re-field__label">Number</span>
    <input class="re-input" name="age" type="number" id="input-number" min="0" max="120" />
  </label>
</form>

Sizes

Small Medium Large

Live example

<div class="grid">
  <label class="re-field">
    <span class="re-field__label">Small</span>
    <input class="re-input" data-size="sm" type="text" id="input-sm" />
  </label>
  <label class="re-field">
    <span class="re-field__label">Medium</span>
    <input class="re-input" data-size="md" type="text" id="input-md" />
  </label>
  <label class="re-field">
    <span class="re-field__label">Large</span>
    <input class="re-input" data-size="lg" type="text" id="input-lg" />
  </label>
</div>

States

Disabled Invalid Not a valid value. Required

Live example

<div class="grid">
  <label class="re-field">
    <span class="re-field__label">Disabled</span>
    <input class="re-input" type="text" id="input-disabled" disabled value="Locked" />
  </label>
  <label class="re-field">
    <span class="re-field__label">Invalid</span>
    <input
      class="re-input"
      type="text"
      id="input-invalid"
      aria-invalid="true"
      aria-describedby="invalid-msg"
      value="bad-value"
    />
    <span id="invalid-msg" class="re-validation-message">Not a valid value.</span>
  </label>
  <label class="re-field">
    <span class="re-field__label" data-required>Required</span>
    <input class="re-input" type="text" id="input-required" required />
  </label>
</div>

Accessibility

• Keyboard — fully native. Tab moves focus to and from the input; typing, caret movement, selection, and per-type controls (e.g. the number type’s Arrow step and spinner) all stay native. There is no extra JavaScript keyboard model — .re-input only styles the element.
• Focus — a visible :focus-visible ring (--re-shadow-focus, drawn with border-color: --re-color-focus-ring and a box-shadow) on keyboard focus; an invalid input keeps a ring in the danger color while focused.
• Semantics — the native <input> keeps its type, so the browser exposes the right role and announces autocomplete and constraint-validation messages itself. Wrapping the control in a <label class="re-field"> (with a .re-field__label span) associates the label, and .re-field__hint text should be wired to the input via aria-describedby. Mark a label data-required to render the visual *; pair it with the native required attribute so it is also announced.
• Notes — the danger border lights up on [aria-invalid="true"] or the native :user-invalid pseudo-class (only after the user interacts), so error styling never fires prematurely; point the input’s aria-describedby at the .re-validation-message so the message is announced. Disabled inputs render at reduced opacity with a not-allowed cursor. See the accessibility guide.