Formsstable

Input

One class for text inputs, textareas and selects, with a ≥3:1 control boundary, visible focus ring, and invalid/disabled/read-only states.

Examples

Text, select, textarea

Full name

Topic

Message

HTML for “Text, select, textarea”

<div class="mp-stack">
  <div class="mp-field">
    <label class="mp-field__label" for="input-name">Full name</label>
    <input class="mp-input" id="input-name" type="text" autocomplete="name" placeholder="Isaac D'Césares">
  </div>
  <div class="mp-field">
    <label class="mp-field__label" for="input-topic">Topic</label>
    <select class="mp-input" id="input-topic">
      <option>AI in education</option>
      <option>Learning design</option>
      <option>Developer tooling</option>
    </select>
  </div>
  <div class="mp-field">
    <label class="mp-field__label" for="input-message">Message</label>
    <textarea class="mp-input" id="input-message" rows="3">Tell us what you want to explore.</textarea>
  </div>
</div>

Sizes and states

HTML for “Sizes and states”

<div class="mp-stack" data-gap="3">
  <input class="mp-input" type="text" data-size="sm" aria-label="Small input" placeholder="Small">
  <input class="mp-input" type="text" data-size="lg" aria-label="Large input" placeholder="Large">
  <input class="mp-input" type="text" aria-label="Disabled input" value="Disabled" disabled>
  <input class="mp-input" type="text" aria-label="Read-only input" value="Read-only" readonly>
  <input class="mp-input" type="text" aria-label="Invalid input" value="Invalid" aria-invalid="true">
</div>

Guidance

.mp-input styles <input>, <textarea> and <select> identically, so a form reads as one surface. Always place it inside a Field with a label.

The border uses --color-border-input, which is gate-checked at ≥3:1 against page, card and dialog surfaces (WCAG 1.4.11) — --color-border-default is decorative and too faint to be a control's only boundary.

Accessibility

Every input needs a visible <label> (or, only where a visible label truly can't exist, aria-label).
Set autocomplete on personal-data fields (WCAG 1.3.5) and the right type (email, tel, url) so mobile keyboards adapt.
Focus shows both a --color-focus border and the 2px --focus-ring — never remove it.
<select> falls back to the native control under Windows High Contrast.

API

Input classes
Class	Kind
`.mp-input`	root

Input attributes
Attribute	Values
`data-size`	`sm` · `lg`

States styled: :disabled :focus-visible :hover [aria-invalid="true"] [multiple] [readonly]. Set the native attribute or ARIA state; there are no state classes.

Input component tokens
Token	Default	Light · dark
`--mp-input-border`	`var(--color-border-input)`	`#7D776E`
`--mp-input-height`	`var(--size-control-md)`	—
`--mp-input-padding`	`var(--space-4)`	—

Design tokens consumed: --border-width-thin --color-bg-primary --color-bg-secondary --color-border-input --color-error --color-focus --color-text-primary --color-text-secondary --color-text-tertiary --focus-ring --focus-ring-offset --font-sans --leading-body --leading-small --radius-sm --size-control-lg --size-control-md --size-control-sm --size-touch-target --space-10 --space-2 --space-24 --space-3 --space-4 --space-5 --state-disabled-opacity --text-body --text-body-lg --text-small --transition-fast

Source

README on GitHub CSS on GitHub Manifest (JSON)