From: Danilo M. Date: Thu, 16 Apr 2026 14:55:50 +0000 (+0200) Subject: feat: add Week 4 documentation (implementation guide, component examples, HANDOFF... X-Git-Tag: release_22042026-1342~183 X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=691bb79d29429ce9e445753092575ec564c68cd2;p=danix.xyz-2.git feat: add Week 4 documentation (implementation guide, component examples, HANDOFF update) --- diff --git a/FORM-COMPONENT-GUIDE.md b/FORM-COMPONENT-GUIDE.md new file mode 100644 index 0000000..a916152 --- /dev/null +++ b/FORM-COMPONENT-GUIDE.md @@ -0,0 +1,646 @@ +# Form Component Guide + +Quick reference for all form components with usage examples. + +--- + +## Table of Contents + +1. [Input Fields](#input-fields) +2. [Textareas](#textareas) +3. [Select Dropdowns](#select-dropdowns) +4. [Checkboxes](#checkboxes) +5. [Radio Buttons](#radio-buttons) +6. [Form Groups](#form-groups) +7. [Form Layouts](#form-layouts) +8. [Modals](#modals) +9. [Notifications](#notifications) +10. [Tooltips](#tooltips) + +--- + +## Input Fields + +### Basic Input + +```html + +``` + +### Email Input with Validation + +```html +
+ + +
+``` + +### Password Input + +```html +
+ + +
Must be at least 8 characters
+
+``` + +### Number Input + +```html +
+ + +
+``` + +### Disabled Input + +```html + +``` + +### Input with Error + +```html +
+ + +
Username must be 3-20 characters
+
+``` + +--- + +## Textareas + +### Basic Textarea + +```html + +``` + +### Textarea with Label and Help Text + +```html +
+ + +
Maximum 500 characters
+
+``` + +### Auto-Expanding Textarea + +```html +
+ + +
+``` + +--- + +## Select Dropdowns + +### Basic Select + +```html + +``` + +### Select with Label + +```html +
+ + +
+``` + +### Multi-Select + +```html + +``` + +--- + +## Checkboxes + +### Single Checkbox + +```html + +``` + +### Checkbox Group + +```html +
+ Select your interests +
+ + + +
+
+``` + +### Disabled Checkbox + +```html + +``` + +--- + +## Radio Buttons + +### Radio Button Group + +```html +
+ Choose an option +
+ + + +
+
+``` + +### Inline Radio Buttons + +```html +
+ + + +
+``` + +--- + +## Form Groups + +### Basic Form Group + +```html +
+ + +
+``` + +### Required Form Group + +```html +
+ + +
+``` + +### Form Group with Help Text + +```html +
+ + +
3-20 characters, alphanumeric only
+
+``` + +### Form Group with Error + +```html +
+ + +
Password must be at least 8 characters
+
+``` + +--- + +## Form Layouts + +### Single Column Form + +```html +
+
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+``` + +### Two-Column Form (Responsive) + +```html +
+
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+``` + +### Inline Form (Search) + +```html +
+
+ + +
+ +
+``` + +--- + +## Modals + +### Alert Modal + +```html +
+
+
+
+

Alert

+
+
+
+

This is an important message.

+
+
+ +
+
+
+ + +``` + +### Confirm Modal + +```html +
+
+
+
+

Confirm Action

+
+
+
+

Are you sure you want to delete this item? This action cannot be undone.

+
+
+ + +
+
+
+``` + +### Modal with Form + +```html +
+
+
+
+

Edit Profile

+
+
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+
+``` + +--- + +## Notifications + +### Toast Notification + +```html + +
+ +
+ + + + + + +``` + +### Toast Usage in Forms + +```html +
+ + +
+ + +``` + +--- + +## Tooltips + +### Top Tooltip (Default) + +```html +
+ Hover me + I'm a tooltip on top! +
+``` + +### Bottom Tooltip + +```html +
+ Hover me + I'm below! +
+``` + +### Left Tooltip + +```html +
+ Hover me + I'm on the left! +
+``` + +### Right Tooltip + +```html +
+ Hover me + I'm on the right! +
+``` + +### Tooltip with Icon + +```html +
+ + Copy to clipboard +
+``` + +--- + +## Loading States + +### Button with Spinner + +```html + +``` + +### Spinner Sizes + +```html + + + +``` + +--- + +## Complete Contact Form Example + +```html +
+
+ + +
+
+ +
+ + +
+
+ +
+ + +
+ +
+ +
+ + +
+``` + +--- + +## Keyboard Shortcuts + +| Key | Action | +|-----|--------| +| Tab | Focus next form field | +| Shift+Tab | Focus previous form field | +| Space | Toggle checkbox/radio | +| Enter | Submit form / Confirm dialog | +| Escape | Close modal / Cancel dialog | +| Arrow Up/Down | Navigate select options | + +--- + +## Best Practices + +1. **Always use labels** — Associate with `for` attribute +2. **Group related fields** — Use `.form-group` wrapper +3. **Provide help text** — Use `.form-group-help` for guidance +4. **Show errors clearly** — Use `.form-error` with specific messages +5. **Test keyboard navigation** — Use Tab, Shift+Tab, Enter, Space, Escape +6. **Verify contrast** — Check both dark and light modes +7. **Respect motion preferences** — Use `prefers-reduced-motion` media query +8. **Validate early** — Real-time feedback, but allow recovery +9. **Disable during submission** — Prevent duplicate submissions +10. **Use semantic HTML** — `
`, ``, `