UNPKG

@n8d/htwoo-patterns

Version:

hTWOo Patterns to setup custom style guide

lab.n8d.studio/htwoo/

n8design/htwoo

47 lines (31 loc) • 1.31 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
--- title: Invalid Text Input order: 10.6 --- # Invalid Text Input A text input that indicates validation errors or invalid input. ## Overview Invalid text inputs visually indicate that the entered value does not meet the required criteria or validation rules. This state provides immediate feedback to users about input problems. ## Usage Invalid text inputs should be used when: * The entered value does not meet validation requirements * Form submission has been attempted with errors * Real-time validation feedback is appropriate ## Visual Characteristics Invalid inputs are visually distinct from valid inputs: * Red border or highlight (ensuring sufficient color contrast) * Often accompanied by an error message or icon * May include additional validation message text ## SCSS **Component Import** **SCSS Partial Location** ## CSS Classes * `.hoo-input-text` - Base text input class * `.hoo-input--invalid` - Class for invalid state styling * `.hoo-validation-message` - Class for the error message ## Accessibility * Always include `aria-invalid="true"` for invalid inputs * Connect error messages using `aria-describedby` * Ensure error messages are clear and actionable * Don't rely on color alone to indicate errors * Consider when to trigger validation (on blur, on submit, etc.)