# Design System - Form Components

## Overview

Complete form component library for user input. All components use Space Grotesk typography, consistent spacing, and the signature Orange→Pink→Blue interaction effects where appropriate.

---

## Design Principles

| Principle | Implementation |
|-----------|----------------|
| **Touch Targets** | Minimum 44px height for all interactive elements |
| **Consistency** | Same border radius, shadows, and colors across all inputs |
| **Feedback** | Clear focus states, error states, and hover effects |
| **Accessibility** | Labels, placeholders, ARIA attributes, keyboard navigation |

---

## Shared Specifications

### Base Input Styles

| Property | Value |
|----------|-------|
| Font Family | Space Grotesk |
| Font Size | 14px |
| Font Weight | 400 |
| Height | 44px (single line) |
| Border Radius | 8px |
| Border | 1px solid #E5E5E5 |
| Background | #FFFFFF |
| Text Color | #383737 |
| Placeholder Color | #9A9A9A |
| Padding | 0 16px |

### State Colors

| State | Border | Background | Shadow |
|-------|--------|------------|--------|
| **Default** | #E5E5E5 | #FFFFFF | none |
| **Hover** | #D4D4D4 | #FFFFFF | 0 2px 4px rgba(0,0,0,0.05) |
| **Focus** | #FB923C | #FFFFFF | 0 0 0 3px rgba(251,146,60,0.15) |
| **Error** | #F472B6 | #FDF2F8 | 0 0 0 3px rgba(244,114,182,0.15) |
| **Disabled** | #E5E5E5 | #F5F5F5 | none |
| **Success** | #3B82F6 | #FFFFFF | 0 0 0 3px rgba(59,130,246,0.15) |

---

## Text Input

Single-line text field for short form data.

### Specifications

| Property | Value |
|----------|-------|
| Width | 100% (container) or fixed |
| Height | 44px |
| Padding | 0 16px |
| Border Radius | 8px |

### Variants

| Variant | Use Case |
|---------|----------|
| Default | Standard text entry |
| With Icon (left) | Search, email, password |
| With Icon (right) | Clear button, validation |
| With Prefix | Currency, URLs |
| With Suffix | Units, domains |

### HTML Structure

```html
<!-- Default Input -->
<div class="form-field">
  <label class="form-label" for="name">Name</label>
  <div class="input-wrapper">
    <input type="text" id="name" class="form-input" placeholder="Enter your name">
  </div>
  <span class="form-hint">This will be displayed publicly</span>
</div>

<!-- Input with Icon -->
<div class="form-field">
  <label class="form-label" for="email">Email</label>
  <div class="input-wrapper has-icon-left">
    <svg class="input-icon left">...</svg>
    <input type="email" id="email" class="form-input" placeholder="you@example.com">
  </div>
</div>

<!-- Input with Error -->
<div class="form-field has-error">
  <label class="form-label" for="username">Username</label>
  <div class="input-wrapper">
    <input type="text" id="username" class="form-input" value="admin">
    <svg class="input-icon right error">...</svg>
  </div>
  <span class="form-error">Username already taken</span>
</div>
```

### CSS

```css
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #383737;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  background: #FFFFFF;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: #383737;
  transition: all 0.2s ease;
}

.form-input::placeholder {
  color: #9A9A9A;
}

.form-input:hover {
  border-color: #D4D4D4;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.form-input:focus {
  outline: none;
  border-color: #FB923C;
  box-shadow: 0 0 0 3px rgba(251,146,60,0.15);
}

.form-input:disabled {
  background: #F5F5F5;
  color: #9A9A9A;
  cursor: not-allowed;
}

/* Icon positioning */
.input-wrapper.has-icon-left .form-input {
  padding-left: 44px;
}

.input-wrapper.has-icon-right .form-input {
  padding-right: 44px;
}

.input-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  color: #9A9A9A;
}

.input-icon.left { left: 12px; }
.input-icon.right { right: 12px; }

/* Error state */
.form-field.has-error .form-input {
  border-color: #F472B6;
  background: #FDF2F8;
}

.form-field.has-error .form-input:focus {
  box-shadow: 0 0 0 3px rgba(244,114,182,0.15);
}

.form-error {
  font-size: 12px;
  color: #DB2777;
}

.form-hint {
  font-size: 12px;
  color: #9A9A9A;
}
```

---

## Textarea

Multi-line text field for longer content.

### Specifications

| Property | Value |
|----------|-------|
| Width | 100% |
| Min Height | 100px |
| Padding | 12px 16px |
| Border Radius | 8px |
| Resize | vertical |
| Line Height | 1.5 |

### HTML Structure

```html
<div class="form-field">
  <label class="form-label" for="description">Description</label>
  <textarea
    id="description"
    class="form-textarea"
    placeholder="Describe your strategy..."
    rows="4"
  ></textarea>
  <div class="textarea-footer">
    <span class="form-hint">Max 500 characters</span>
    <span class="char-count">0/500</span>
  </div>
</div>
```

### CSS

```css
.form-textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px 16px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  background: #FFFFFF;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: #383737;
  line-height: 1.5;
  resize: vertical;
  transition: all 0.2s ease;
}

.form-textarea::placeholder {
  color: #9A9A9A;
}

.form-textarea:hover {
  border-color: #D4D4D4;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.form-textarea:focus {
  outline: none;
  border-color: #FB923C;
  box-shadow: 0 0 0 3px rgba(251,146,60,0.15);
}

.textarea-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.char-count {
  font-size: 12px;
  color: #9A9A9A;
}
```

---

## Select / Dropdown

Selection from predefined options.

### Specifications

| Property | Value |
|----------|-------|
| Height | 44px |
| Padding | 0 40px 0 16px |
| Border Radius | 8px |
| Dropdown Border Radius | 8px |
| Option Height | 40px |
| Max Dropdown Height | 240px |

### HTML Structure

```html
<!-- Native Select (Simple) -->
<div class="form-field">
  <label class="form-label" for="category">Category</label>
  <div class="select-wrapper">
    <select id="category" class="form-select">
      <option value="" disabled selected>Select category</option>
      <option value="strategy">Strategy</option>
      <option value="research">Research</option>
      <option value="prototype">Prototype</option>
    </select>
    <svg class="select-arrow" viewBox="0 0 24 24">
      <polyline points="6 9 12 15 18 9"/>
    </svg>
  </div>
</div>

<!-- Custom Dropdown (Advanced) -->
<div class="form-field">
  <label class="form-label">Strategy Mode</label>
  <div class="dropdown" data-open="false">
    <button class="dropdown-trigger" type="button">
      <span class="dropdown-value">Simple</span>
      <svg class="dropdown-arrow" viewBox="0 0 24 24">
        <polyline points="6 9 12 15 18 9"/>
      </svg>
    </button>
    <div class="dropdown-menu">
      <div class="dropdown-option selected" data-value="simple">
        <span>Simple</span>
        <svg class="check-icon" viewBox="0 0 24 24">
          <polyline points="20 6 9 17 4 12"/>
        </svg>
      </div>
      <div class="dropdown-option" data-value="advanced">
        <span>Advanced</span>
      </div>
      <div class="dropdown-option" data-value="expert">
        <span>Expert</span>
      </div>
    </div>
  </div>
</div>
```

### CSS

```css
/* Native Select */
.select-wrapper {
  position: relative;
}

.form-select {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 16px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  background: #FFFFFF;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: #383737;
  appearance: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-select:hover {
  border-color: #D4D4D4;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.form-select:focus {
  outline: none;
  border-color: #FB923C;
  box-shadow: 0 0 0 3px rgba(251,146,60,0.15);
}

.select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #9A9A9A;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Custom Dropdown */
.dropdown {
  position: relative;
}

.dropdown-trigger {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 16px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  background: #FFFFFF;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: #383737;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.dropdown-trigger:hover {
  border-color: #D4D4D4;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.dropdown[data-open="true"] .dropdown-trigger {
  border-color: #FB923C;
  box-shadow: 0 0 0 3px rgba(251,146,60,0.15);
}

.dropdown-arrow {
  width: 20px;
  height: 20px;
  color: #9A9A9A;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.2s ease;
}

.dropdown[data-open="true"] .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}

.dropdown[data-open="true"] .dropdown-menu {
  display: block;
}

.dropdown-option {
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 14px;
  color: #383737;
  transition: background 0.15s ease;
}

.dropdown-option:hover {
  background: #F5F5F5;
}

.dropdown-option.selected {
  background: #FFF7ED;
  color: #EA580C;
}

.check-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
```

---

## Checkbox

Multiple selection from options.

### Specifications

| Property | Value |
|----------|-------|
| Box Size | 20px × 20px |
| Border Radius | 4px |
| Touch Target | 44px × 44px |
| Check Icon | 12px |
| Gap (box to label) | 12px |

### States

| State | Border | Background | Check Color |
|-------|--------|------------|-------------|
| Unchecked | #D4D4D4 | #FFFFFF | - |
| Unchecked Hover | #9A9A9A | #FFFFFF | - |
| Checked | #1A1A2E | #1A1A2E | #FFFFFF |
| Checked Hover | #2A2A3E | #2A2A3E | #FFFFFF |
| Disabled | #E5E5E5 | #F5F5F5 | #9A9A9A |

### HTML Structure

```html
<div class="checkbox-group">
  <label class="checkbox-label">
    <input type="checkbox" class="checkbox-input">
    <span class="checkbox-box">
      <svg class="checkbox-check" viewBox="0 0 24 24">
        <polyline points="20 6 9 17 4 12"/>
      </svg>
    </span>
    <span class="checkbox-text">Enable notifications</span>
  </label>
</div>

<!-- Checkbox Group -->
<fieldset class="form-field">
  <legend class="form-label">Interests</legend>
  <div class="checkbox-group">
    <label class="checkbox-label">
      <input type="checkbox" class="checkbox-input" checked>
      <span class="checkbox-box">
        <svg class="checkbox-check" viewBox="0 0 24 24">
          <polyline points="20 6 9 17 4 12"/>
        </svg>
      </span>
      <span class="checkbox-text">Strategy</span>
    </label>
    <label class="checkbox-label">
      <input type="checkbox" class="checkbox-input">
      <span class="checkbox-box">
        <svg class="checkbox-check" viewBox="0 0 24 24">
          <polyline points="20 6 9 17 4 12"/>
        </svg>
      </span>
      <span class="checkbox-text">Research</span>
    </label>
    <label class="checkbox-label">
      <input type="checkbox" class="checkbox-input">
      <span class="checkbox-box">
        <svg class="checkbox-check" viewBox="0 0 24 24">
          <polyline points="20 6 9 17 4 12"/>
        </svg>
      </span>
      <span class="checkbox-text">Prototyping</span>
    </label>
  </div>
</fieldset>
```

### CSS

```css
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-height: 44px;
  padding: 0 4px;
}

.checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-box {
  width: 20px;
  height: 20px;
  border: 2px solid #D4D4D4;
  border-radius: 4px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.checkbox-check {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
}

.checkbox-label:hover .checkbox-box {
  border-color: #9A9A9A;
}

.checkbox-input:checked + .checkbox-box {
  background: #1A1A2E;
  border-color: #1A1A2E;
}

.checkbox-input:checked + .checkbox-box .checkbox-check {
  opacity: 1;
  transform: scale(1);
}

.checkbox-input:focus + .checkbox-box {
  box-shadow: 0 0 0 3px rgba(251,146,60,0.15);
}

.checkbox-input:disabled + .checkbox-box {
  background: #F5F5F5;
  border-color: #E5E5E5;
}

.checkbox-input:disabled:checked + .checkbox-box {
  background: #D4D4D4;
}

.checkbox-input:disabled ~ .checkbox-text {
  color: #9A9A9A;
}

.checkbox-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: #383737;
}
```

---

## Radio Button

Single selection from group.

### Specifications

| Property | Value |
|----------|-------|
| Circle Size | 20px × 20px |
| Inner Dot | 8px |
| Touch Target | 44px × 44px |
| Gap (circle to label) | 12px |

### HTML Structure

```html
<fieldset class="form-field">
  <legend class="form-label">Plan</legend>
  <div class="radio-group">
    <label class="radio-label">
      <input type="radio" name="plan" class="radio-input" value="free" checked>
      <span class="radio-circle">
        <span class="radio-dot"></span>
      </span>
      <span class="radio-content">
        <span class="radio-text">Free</span>
        <span class="radio-description">Basic features for personal use</span>
      </span>
    </label>
    <label class="radio-label">
      <input type="radio" name="plan" class="radio-input" value="pro">
      <span class="radio-circle">
        <span class="radio-dot"></span>
      </span>
      <span class="radio-content">
        <span class="radio-text">Pro</span>
        <span class="radio-description">Advanced features for professionals</span>
      </span>
    </label>
    <label class="radio-label">
      <input type="radio" name="plan" class="radio-input" value="team">
      <span class="radio-circle">
        <span class="radio-dot"></span>
      </span>
      <span class="radio-content">
        <span class="radio-text">Team</span>
        <span class="radio-description">Collaboration features for teams</span>
      </span>
    </label>
  </div>
</fieldset>
```

### CSS

```css
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radio-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  min-height: 44px;
  padding: 8px 4px;
}

.radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-circle {
  width: 20px;
  height: 20px;
  border: 2px solid #D4D4D4;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-top: 2px;
}

.radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  transform: scale(0);
  transition: all 0.2s ease;
}

.radio-label:hover .radio-circle {
  border-color: #9A9A9A;
}

.radio-input:checked + .radio-circle {
  background: #1A1A2E;
  border-color: #1A1A2E;
}

.radio-input:checked + .radio-circle .radio-dot {
  transform: scale(1);
}

.radio-input:focus + .radio-circle {
  box-shadow: 0 0 0 3px rgba(251,146,60,0.15);
}

.radio-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.radio-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #383737;
}

.radio-description {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  color: #9A9A9A;
}
```

---

## Toggle / Switch

On/off control for binary settings.

### Specifications

| Property | Value |
|----------|-------|
| Track Width | 44px |
| Track Height | 24px |
| Knob Size | 18px |
| Border Radius | 12px (track), 50% (knob) |
| Touch Target | 44px × 44px |

### States

| State | Track | Knob |
|-------|-------|------|
| Off | #E5E5E5 | #FFFFFF |
| Off Hover | #D4D4D4 | #FFFFFF |
| On | #1A1A2E | #FFFFFF |
| On Hover | #2A2A3E | #FFFFFF |
| Disabled Off | #F5F5F5 | #E5E5E5 |
| Disabled On | #D4D4D4 | #F5F5F5 |

### HTML Structure

```html
<div class="form-field">
  <div class="toggle-row">
    <span class="toggle-label-text">Dark Mode</span>
    <label class="toggle-label">
      <input type="checkbox" class="toggle-input">
      <span class="toggle-track">
        <span class="toggle-knob"></span>
      </span>
    </label>
  </div>
</div>

<!-- Toggle with description -->
<div class="form-field">
  <div class="toggle-row">
    <div class="toggle-content">
      <span class="toggle-label-text">Email Notifications</span>
      <span class="toggle-description">Receive updates about your strategies</span>
    </div>
    <label class="toggle-label">
      <input type="checkbox" class="toggle-input" checked>
      <span class="toggle-track">
        <span class="toggle-knob"></span>
      </span>
    </label>
  </div>
</div>
```

### CSS

```css
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
}

.toggle-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toggle-label-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #383737;
}

.toggle-description {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  color: #9A9A9A;
}

.toggle-label {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  width: 44px;
  height: 24px;
  background: #E5E5E5;
  border-radius: 12px;
  position: relative;
  transition: all 0.2s ease;
}

.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
}

.toggle-label:hover .toggle-track {
  background: #D4D4D4;
}

.toggle-input:checked + .toggle-track {
  background: #1A1A2E;
}

.toggle-input:checked + .toggle-track .toggle-knob {
  transform: translateX(20px);
}

.toggle-label:hover .toggle-input:checked + .toggle-track {
  background: #2A2A3E;
}

.toggle-input:focus + .toggle-track {
  box-shadow: 0 0 0 3px rgba(251,146,60,0.15);
}

.toggle-input:disabled + .toggle-track {
  background: #F5F5F5;
  cursor: not-allowed;
}

.toggle-input:disabled + .toggle-track .toggle-knob {
  background: #E5E5E5;
  box-shadow: none;
}

.toggle-input:disabled:checked + .toggle-track {
  background: #D4D4D4;
}
```

---

## Search Input

Specialized input for search functionality.

### Specifications

| Property | Value |
|----------|-------|
| Height | 44px |
| Border Radius | 8px (default) or 22px (pill) |
| Icon Size | 20px |
| Clear Button | 20px |

### Variants

| Variant | Use Case |
|---------|----------|
| Default | Standard search |
| Pill | Rounded, prominent search |
| With Filters | Search with category filter |

### HTML Structure

```html
<!-- Default Search -->
<div class="search-wrapper">
  <svg class="search-icon" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8"/>
    <path d="M21 21l-4.35-4.35"/>
  </svg>
  <input type="search" class="search-input" placeholder="Search...">
  <button class="search-clear" type="button" aria-label="Clear search">
    <svg viewBox="0 0 24 24">
      <path d="M18 6L6 18M6 6l12 12"/>
    </svg>
  </button>
</div>

<!-- Pill Search -->
<div class="search-wrapper pill">
  <svg class="search-icon" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8"/>
    <path d="M21 21l-4.35-4.35"/>
  </svg>
  <input type="search" class="search-input" placeholder="Search strategies...">
</div>

<!-- Search with Ripple Effect -->
<div class="search-wrapper with-ripple">
  <div class="ripple-grid"></div>
  <div class="search-content">
    <svg class="search-icon" viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="8"/>
      <path d="M21 21l-4.35-4.35"/>
    </svg>
    <input type="search" class="search-input" placeholder="Search...">
  </div>
</div>
```

### CSS

```css
.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.search-wrapper.pill {
  border-radius: 22px;
}

.search-wrapper:hover {
  border-color: #D4D4D4;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.search-wrapper:focus-within {
  border-color: #FB923C;
  box-shadow: 0 0 0 3px rgba(251,146,60,0.15);
}

.search-icon {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 20px;
  color: #9A9A9A;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  pointer-events: none;
}

.search-input {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 44px;
  border: none;
  background: transparent;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: #383737;
}

.search-input::placeholder {
  color: #9A9A9A;
}

.search-input:focus {
  outline: none;
}

.search-clear {
  position: absolute;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9A9A9A;
  opacity: 0;
  transition: all 0.2s ease;
}

.search-wrapper:focus-within .search-clear,
.search-input:not(:placeholder-shown) ~ .search-clear {
  opacity: 1;
}

.search-clear:hover {
  background: #F5F5F5;
  color: #383737;
}

.search-clear svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Search with Ripple */
.search-wrapper.with-ripple {
  overflow: hidden;
  box-shadow: 0 1px 0 0 #808080;
}

.search-wrapper.with-ripple .ripple-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  z-index: 1;
}

.search-wrapper.with-ripple .search-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  background: rgba(255,255,255,0.85);
  margin: 3px;
  border-radius: 5px;
}

.search-wrapper.with-ripple .search-icon {
  position: relative;
  left: auto;
  margin-left: 12px;
}

.search-wrapper.with-ripple .search-input {
  padding-left: 8px;
}
```

---

## Form Layout

### Vertical Form (Default)

```html
<form class="form form-vertical">
  <div class="form-field">
    <label class="form-label">Strategy Name</label>
    <input type="text" class="form-input" placeholder="Enter name">
  </div>
  <div class="form-field">
    <label class="form-label">Description</label>
    <textarea class="form-textarea" placeholder="Describe your strategy"></textarea>
  </div>
  <div class="form-actions">
    <button type="button" class="btn btn-secondary">Cancel</button>
    <button type="submit" class="btn btn-primary">Create Strategy</button>
  </div>
</form>
```

### Inline Form

```html
<form class="form form-inline">
  <div class="form-field">
    <input type="email" class="form-input" placeholder="Enter email">
  </div>
  <button type="submit" class="btn btn-primary">Subscribe</button>
</form>
```

### CSS

```css
.form-vertical {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-inline {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.form-inline .form-field {
  flex: 1;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 8px;
}
```

---

## Design Tokens

```css
:root {
  /* Form Sizing */
  --form-input-height: 44px;
  --form-input-padding: 0 16px;
  --form-input-radius: 8px;
  --form-textarea-min-height: 100px;
  --form-textarea-padding: 12px 16px;

  /* Form Colors */
  --form-border-default: #E5E5E5;
  --form-border-hover: #D4D4D4;
  --form-border-focus: #FB923C;
  --form-border-error: #F472B6;
  --form-bg-default: #FFFFFF;
  --form-bg-disabled: #F5F5F5;
  --form-bg-error: #FDF2F8;
  --form-text: #383737;
  --form-placeholder: #9A9A9A;
  --form-label: #383737;
  --form-hint: #9A9A9A;
  --form-error: #DB2777;

  /* Focus Ring */
  --form-focus-ring: 0 0 0 3px rgba(251,146,60,0.15);
  --form-error-ring: 0 0 0 3px rgba(244,114,182,0.15);

  /* Checkbox/Radio */
  --form-check-size: 20px;
  --form-check-radius: 4px;
  --form-check-bg: #1A1A2E;

  /* Toggle */
  --form-toggle-width: 44px;
  --form-toggle-height: 24px;
  --form-toggle-knob: 18px;
  --form-toggle-bg-off: #E5E5E5;
  --form-toggle-bg-on: #1A1A2E;
}
```

---

## Accessibility Checklist

- [ ] All inputs have associated `<label>` elements
- [ ] Error messages use `aria-describedby`
- [ ] Required fields marked with `aria-required="true"`
- [ ] Focus visible on all interactive elements
- [ ] Color not sole indicator of state (icons/text supplement)
- [ ] Touch targets minimum 44×44px
- [ ] Keyboard navigation works (Tab, Space, Enter, Arrow keys)
- [ ] Screen reader announces state changes

---

## Prototype

`forms-prototype/index.html`