Input

Class-based input component with label, help text, error state, and accessible markup.

---

Classes

Class	Description
.input	Base input styling (border, font, transitions)
.input--sm	Small size
.input--md	Medium size (default)
.input--lg	Large size
.input--error	Error border color and focus ring
.input--disabled	Disabled opacity and cursor
.input--readonly	Readonly background
.input-field	Wrapper for label + input + help/error
.input-field--block	Full-width wrapper
.input-label	Label text
.input-label__required	Required asterisk
.input-help	Help text below input
.input-error	Error message text

---

Sizes

<div class="flex flex-col gap-2" style="max-width: 360px">
  <input class="input input--sm" placeholder="Small input" />
  <input class="input input--md" placeholder="Medium input" />
  <input class="input input--lg" placeholder="Large input" />
</div>

<input class="input input--sm" placeholder="Small" />
<input class="input input--md" placeholder="Medium" />
<input class="input input--lg" placeholder="Large" />

---

With Label & Help Text

<div class="input-field" style="max-width: 360px">
  <label class="input-label" for="preview-name">Full name <span class="input-label__required">*</span></label>
  <input id="preview-name" class="input input--md" type="text" placeholder="John Doe" required aria-required="true" />
  <p class="input-help">Enter your full legal name</p>
</div>

Full name *

Enter your full legal name

<div class="input-field">
  <label class="input-label" for="name">
    Full name <span class="input-label__required">*</span>
  </label>
  <input id="name" class="input input--md" type="text" placeholder="John Doe"
    required aria-required="true" />
  <p class="input-help">Enter your full legal name</p>
</div>

---

Error State

<div class="input-field" style="max-width: 360px">
  <label class="input-label" for="preview-user">Username</label>
  <input id="preview-user" class="input input--md input--error" type="text" value="admin" aria-invalid="true" aria-describedby="preview-user-err" />
  <p id="preview-user-err" class="input-error" role="alert">Username is already taken</p>
</div>

Username

Username is already taken

<div class="input-field">
  <label class="input-label" for="username">Username</label>
  <input id="username" class="input input--md input--error" type="text"
    aria-invalid="true" aria-describedby="username-error" />
  <p id="username-error" class="input-error" role="alert">
    Username is already taken
  </p>
</div>

---

Disabled & Readonly

<div class="flex flex-col gap-3" style="max-width: 360px">
  <div class="input-field">
    <label class="input-label" for="preview-dis">Disabled</label>
    <input id="preview-dis" class="input input--md" disabled value="Cannot edit" />
  </div>
  <div class="input-field">
    <label class="input-label" for="preview-ro">Readonly</label>
    <input id="preview-ro" class="input input--md" readonly value="Read only value" />
  </div>
</div>

Disabled

Readonly

<input class="input input--md" disabled value="Cannot edit" />
<input class="input input--md" readonly value="Read only" />

---

Accessibility

• Associate <label> with input via for/id
• Set aria-invalid="true" when in error state
• Point aria-describedby to help or error text element
• Use role="alert" on error text for screen reader announcement
• Set aria-required="true" on required fields