Forms

Input, select, textarea, and label components.

Source: src/styles/components/input.scss, select.scss, textarea.scss, label.scss
Demo: index.html
JavaScript required: No

---

Label

<label for="field-id" class="dga-label">Text field</label>

Preview

Text field

Always pair for with the control id.

---

Text input

<label for="dga-input" class="dga-label">Text field</label>
<input type="text" id="dga-input" class="dga-input" placeholder="Type here..." />

Preview

Text field

Error state

<input type="text" class="dga-input dga-input-error" aria-invalid="true" />

Preview

Class	Purpose
dga-input	Base input (40px height, full width)
dga-input-error	Red border and error underline

---

Select

<label for="dga-select" class="dga-label">Dropdown</label>
<select id="dga-select" class="dga-select">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Preview

DropdownOption 1Option 2Option 3

Error state

<select class="dga-select error" aria-invalid="true">...</select>

Note: select uses class error, not dga-select-error.

---

Textarea

<label for="dga-textarea" class="dga-label">Message</label>
<textarea id="dga-textarea" class="dga-textarea" placeholder="Write your message..."></textarea>

Preview

Message

Error state

<textarea class="dga-textarea dga-textarea-error" aria-invalid="true"></textarea>

Min height: 96px. Resizable by default.

---

Full form example

<div class="dga-d-flex dga-flex-col dga-gap-3">
  <div>
    <label for="name" class="dga-label">Name</label>
    <input type="text" id="name" class="dga-input" />
  </div>
  <div>
    <label for="role" class="dga-label">Role</label>
    <select id="role" class="dga-select">
      <option>Citizen</option>
      <option>Employee</option>
    </select>
  </div>
  <div>
    <label for="message" class="dga-label">Message</label>
    <textarea id="message" class="dga-textarea"></textarea>
  </div>
</div>

Preview

Name

RoleCitizenEmployee

Message

---

States

All form controls support:

• Hover — darker border
• Focus — bottom accent line + shadow
• Active — partial underline + gray background
• Error — red border (see classes above)

---

Accessibility

• Always use <label class="dga-label"> with matching for / id
• Set aria-invalid="true" on error fields
• Add error message text linked with aria-describedby

---

Related

• Label · Button