Forms

Forms collect user input and should be clear, accessible, and provide helpful feedback.

---

Text Inputs

Standard Input

.input {
  background-color: var(--input);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

Input Sizes

Size	Height	Padding	Font Size	Usage
Small	32px	0.375rem 0.75rem	12px	Compact forms, tables
Default	40px	0.625rem 0.875rem	14px	Standard forms
Large	48px	0.875rem 1rem	16px	Hero forms, prominent inputs

---

Input States

Default State

Focus State

Success State

Error State

Disabled State

---

Textarea

---

Select / Dropdown

Select Options

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a plan..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="basic">Basic Plan</SelectItem>
    <SelectItem value="professional">Professional Plan</SelectItem>
    <SelectItem value="enterprise">Enterprise Plan</SelectItem>
  </SelectContent>
</Select>

---

Checkbox

---

Radio Buttons

---

Switch / Toggle

---

Date Picker

---

File Upload

---

Form Layout

Vertical Layout (Default)

<form>
  <div class="space-y-4">
    <div>
      <label>First Name</label>
      <input type="text" />
    </div>
    <div>
      <label>Last Name</label>
      <input type="text" />
    </div>
    <div>
      <label>Email</label>
      <input type="email" />
    </div>
  </div>
</form>

Horizontal Layout

Grid Layout

---

Validation Guidelines

---

Accessibility

1. Labels

   Every input must have an associated <label> element with htmlFor attribute.

2. Error Announcements

   Use aria-describedby to link inputs to error messages for screen readers.

3. Required Fields

   Use aria-required="true" in addition to the visual asterisk.

4. Focus Management

   After form submission errors, focus the first invalid field.