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

Email Address

[e-mail]

We’ll never share your email.

.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

Default input

Focus State

Focused input

Success State

[e-mail]✓

Email is valid

Error State

invalid-email✗

Please enter a valid email address

Disabled State

Disabled input

---

Textarea

Description

Enter a detailed description…

Maximum 500 characters

---

Select / Dropdown

Membership Plan

Select a plan…▼

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

Unchecked

✓

Checked

Disabled

---

Radio Buttons

Selected Option

Unselected Option

Another Option

---

Switch / Toggle

Email notifications

SMS notifications

---

Date Picker

Event Date

Pick a date…📅

---

File Upload

Profile Picture

📁

Click to upload or drag and drop

PNG, JPG or GIF (max. 5MB)

---

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

First Name

John

Email

[e-mail]

Grid Layout

First Name

John

Last Name

Smith

---

Validation Guidelines

Required Fields

• Mark required fields with an asterisk (*)
• Place asterisk after the label
• Use red colour for the asterisk
• Provide clear error messages when empty

Inline Validation

• 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

Error Messages

• Be specific about what’s wrong
• Suggest how to fix the error
• Position below the input field
• Use destructive colour (#DC3545)

Form Submission

• Validate all fields before submission
• Scroll to first error if validation fails
• Disable submit button during processing
• Show success message after completion

---

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.