> ## Documentation Index
> Fetch the complete documentation index at: https://memberpulseptyltd.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Forms

> MemberPulse form elements - inputs, selects, checkboxes, and validation

# Forms

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

***

## Text Inputs

### Standard Input

<Card>
  <div style={{padding: '24px', maxWidth: '400px'}}>
    <label style={{display: 'block', marginBottom: '8px', fontWeight: '500', fontSize: '14px'}}>Email Address</label>

    <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '10px 14px', fontSize: '14px', color: '#6C757D'}}>
      [name@example.com](mailto:name@example.com)
    </div>

    <p style={{marginTop: '6px', fontSize: '12px', color: '#6C757D'}}>We'll never share your email.</p>
  </div>
</Card>

```css theme={null}
.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

<Card>
  <div style={{padding: '16px', maxWidth: '300px'}}>
    <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '10px 14px', fontSize: '14px'}}>
      Default input
    </div>
  </div>
</Card>

### Focus State

<Card>
  <div style={{padding: '16px', maxWidth: '300px'}}>
    <div style={{backgroundColor: '#FFFFFF', border: '2px solid #2421C4', borderRadius: '0', padding: '9px 13px', fontSize: '14px', boxShadow: '0 0 0 3px rgba(0, 102, 204, 0.1)'}}>
      Focused input
    </div>
  </div>
</Card>

### Success State

<Card>
  <div style={{padding: '16px', maxWidth: '300px'}}>
    <div style={{backgroundColor: '#ECFDF5', border: '1px solid #10B981', borderRadius: '0', padding: '10px 14px', fontSize: '14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
      <span>[valid@email.com](mailto:valid@email.com)</span>
      <span style={{color: '#10B981'}}>✓</span>
    </div>

    <p style={{marginTop: '6px', fontSize: '12px', color: '#10B981'}}>Email is valid</p>
  </div>
</Card>

### Error State

<Card>
  <div style={{padding: '16px', maxWidth: '300px'}}>
    <div style={{backgroundColor: '#FEF2F2', border: '1px solid #DC3545', borderRadius: '0', padding: '10px 14px', fontSize: '14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
      <span>invalid-email</span>
      <span style={{color: '#DC3545'}}>✗</span>
    </div>

    <p style={{marginTop: '6px', fontSize: '12px', color: '#DC3545'}}>Please enter a valid email address</p>
  </div>
</Card>

### Disabled State

<Card>
  <div style={{padding: '16px', maxWidth: '300px'}}>
    <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '10px 14px', fontSize: '14px', color: '#9CA3AF', cursor: 'not-allowed', opacity: 0.6}}>
      Disabled input
    </div>
  </div>
</Card>

***

## Textarea

<Card>
  <div style={{padding: '24px', maxWidth: '400px'}}>
    <label style={{display: 'block', marginBottom: '8px', fontWeight: '500', fontSize: '14px'}}>Description</label>

    <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '10px 14px', fontSize: '14px', minHeight: '100px', color: '#6C757D'}}>
      Enter a detailed description...
    </div>

    <p style={{marginTop: '6px', fontSize: '12px', color: '#6C757D'}}>Maximum 500 characters</p>
  </div>
</Card>

***

## Select / Dropdown

<Card>
  <div style={{padding: '24px', maxWidth: '400px'}}>
    <label style={{display: 'block', marginBottom: '8px', fontWeight: '500', fontSize: '14px'}}>Membership Plan</label>

    <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '10px 14px', fontSize: '14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer'}}>
      <span>Select a plan...</span>
      <span>▼</span>
    </div>
  </div>
</Card>

### Select Options

```jsx theme={null}
<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

<Card>
  <div style={{padding: '24px', display: 'flex', flexDirection: 'column', gap: '12px'}}>
    <div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
      <div style={{width: '20px', height: '20px', border: '2px solid #E2E8F0', borderRadius: '0', backgroundColor: 'white'}} />

      <span style={{fontSize: '14px'}}>Unchecked</span>
    </div>

    <div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
      <div style={{width: '20px', height: '20px', border: '2px solid #2421C4', borderRadius: '0', backgroundColor: '#2421C4', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: '12px'}}>✓</div>
      <span style={{fontSize: '14px'}}>Checked</span>
    </div>

    <div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
      <div style={{width: '20px', height: '20px', border: '2px solid #E2E8F0', borderRadius: '0', backgroundColor: '#F5F5F7', opacity: 0.5}} />

      <span style={{fontSize: '14px', opacity: 0.5}}>Disabled</span>
    </div>
  </div>
</Card>

***

## Radio Buttons

<Card>
  <div style={{padding: '24px', display: 'flex', flexDirection: 'column', gap: '12px'}}>
    <div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
      <div style={{width: '20px', height: '20px', border: '2px solid #2421C4', borderRadius: '0', backgroundColor: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
        <div style={{width: '10px', height: '10px', borderRadius: '0', backgroundColor: '#2421C4'}} />
      </div>

      <span style={{fontSize: '14px'}}>Selected Option</span>
    </div>

    <div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
      <div style={{width: '20px', height: '20px', border: '2px solid #E2E8F0', borderRadius: '0', backgroundColor: 'white'}} />

      <span style={{fontSize: '14px'}}>Unselected Option</span>
    </div>

    <div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
      <div style={{width: '20px', height: '20px', border: '2px solid #E2E8F0', borderRadius: '0', backgroundColor: 'white'}} />

      <span style={{fontSize: '14px'}}>Another Option</span>
    </div>
  </div>
</Card>

***

## Switch / Toggle

<Card>
  <div style={{padding: '24px', display: 'flex', flexDirection: 'column', gap: '16px'}}>
    <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', maxWidth: '300px'}}>
      <span style={{fontSize: '14px'}}>Email notifications</span>

      <div style={{width: '44px', height: '24px', backgroundColor: '#2421C4', borderRadius: '0', position: 'relative', cursor: 'pointer'}}>
        <div style={{width: '20px', height: '20px', backgroundColor: 'white', borderRadius: '0', position: 'absolute', top: '2px', right: '2px', boxShadow: '0 1px 3px rgba(0,0,0,0.2)'}} />
      </div>
    </div>

    <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', maxWidth: '300px'}}>
      <span style={{fontSize: '14px'}}>SMS notifications</span>

      <div style={{width: '44px', height: '24px', backgroundColor: '#E2E8F0', borderRadius: '0', position: 'relative', cursor: 'pointer'}}>
        <div style={{width: '20px', height: '20px', backgroundColor: 'white', borderRadius: '0', position: 'absolute', top: '2px', left: '2px', boxShadow: '0 1px 3px rgba(0,0,0,0.2)'}} />
      </div>
    </div>
  </div>
</Card>

***

## Date Picker

<Card>
  <div style={{padding: '24px', maxWidth: '400px'}}>
    <label style={{display: 'block', marginBottom: '8px', fontWeight: '500', fontSize: '14px'}}>Event Date</label>

    <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '10px 14px', fontSize: '14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer'}}>
      <span style={{color: '#6C757D'}}>Pick a date...</span>
      <span>📅</span>
    </div>
  </div>
</Card>

***

## File Upload

<Card>
  <div style={{padding: '24px', maxWidth: '400px'}}>
    <label style={{display: 'block', marginBottom: '8px', fontWeight: '500', fontSize: '14px'}}>Profile Picture</label>

    <div style={{border: '2px dashed #E2E8F0', borderRadius: '0', padding: '32px', textAlign: 'center', cursor: 'pointer'}}>
      <div style={{fontSize: '32px', marginBottom: '8px'}}>📁</div>
      <p style={{fontSize: '14px', fontWeight: '500', marginBottom: '4px'}}>Click to upload or drag and drop</p>
      <p style={{fontSize: '12px', color: '#6C757D'}}>PNG, JPG or GIF (max. 5MB)</p>
    </div>
  </div>
</Card>

***

## Form Layout

### Vertical Layout (Default)

```html theme={null}
<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

<Card>
  <div style={{padding: '24px'}}>
    <div style={{display: 'flex', alignItems: 'center', marginBottom: '16px'}}>
      <label style={{width: '120px', fontWeight: '500', fontSize: '14px'}}>First Name</label>
      <div style={{flex: 1, backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '10px 14px', fontSize: '14px'}}>John</div>
    </div>

    <div style={{display: 'flex', alignItems: 'center'}}>
      <label style={{width: '120px', fontWeight: '500', fontSize: '14px'}}>Email</label>
      <div style={{flex: 1, backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '10px 14px', fontSize: '14px'}}>[john@example.com](mailto:john@example.com)</div>
    </div>
  </div>
</Card>

### Grid Layout

<Card>
  <div style={{padding: '24px'}}>
    <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px'}}>
      <div>
        <label style={{display: 'block', marginBottom: '8px', fontWeight: '500', fontSize: '14px'}}>First Name</label>
        <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '10px 14px', fontSize: '14px'}}>John</div>
      </div>

      <div>
        <label style={{display: 'block', marginBottom: '8px', fontWeight: '500', fontSize: '14px'}}>Last Name</label>
        <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '10px 14px', fontSize: '14px'}}>Smith</div>
      </div>
    </div>
  </div>
</Card>

***

## Validation Guidelines

<AccordionGroup>
  <Accordion title="Required Fields" icon="asterisk">
    * Mark required fields with an asterisk (\*)
    * Place asterisk after the label
    * Use red colour for the asterisk
    * Provide clear error messages when empty
  </Accordion>

  <Accordion title="Inline Validation" icon="check-circle">
    * Validate on blur (when user leaves field)
    * Show success state for valid inputs
    * Show error state with clear message
    * Don't validate while user is typing
  </Accordion>

  <Accordion title="Error Messages" icon="alert-circle">
    * Be specific about what's wrong
    * Suggest how to fix the error
    * Position below the input field
    * Use destructive colour (#DC3545)
  </Accordion>

  <Accordion title="Form Submission" icon="send">
    * Validate all fields before submission
    * Scroll to first error if validation fails
    * Disable submit button during processing
    * Show success message after completion
  </Accordion>
</AccordionGroup>

***

## Accessibility

<Steps>
  <Step title="Labels" icon="tag">
    Every input must have an associated `<label>` element with `htmlFor` attribute.
  </Step>

  <Step title="Error Announcements" icon="volume-2">
    Use `aria-describedby` to link inputs to error messages for screen readers.
  </Step>

  <Step title="Required Fields" icon="asterisk">
    Use `aria-required="true"` in addition to the visual asterisk.
  </Step>

  <Step title="Focus Management" icon="crosshair">
    After form submission errors, focus the first invalid field.
  </Step>
</Steps>