UNPKG

@wfp/react

Version:

WFP UI Kit

github.com/wfp/ui

wfp/ui

47 lines (26 loc) • 2.26 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
## Usage Forms are widely used to collect user input. Form can have any number of react components enclosed within FormGroup component. FormGroup component is a wrapper for legend and fieldset component. ## Content #### Labels Effective form labeling helps users understand what information to enter into a Text Input. Using a placeholder text as a label is often applied as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues. #### Accessibility best practices for labels: - Labels must be visible when an input gets focus. - Labels must be announced to the screen reader on focus. - Ensure the helper text that appears under an input is read when an assistive technology user stops at an input using ARIA. - Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized). Default values - Where possible, add programmatic assistance. Detect and pre-fill inputs to reduce errors and save time. When the software can’t determine the value that belongs in an input, use type-ahead to make suggestions. Use sentence-case for default values, detected values, and auto-completion text. #### Helper text Helper text is pertinent information that assists the user in completing a field. Helper text is always available when the input is focused and appears underneath the label. Use sentence-style capitalization, and in most cases, write the text as full sentences with punctuation. #### Placeholder text Placeholder text provides hints or examples of what to enter. Placeholder text disappears after the user begins entering data into the Input and should not contain crucial information. Use sentence-style capitalization, and in most cases, write the text as a direct statement without punctuation. ## Related [TextInput](?path=/docs/components-forms-textinput--regular) [TextArea](?path=/docs/components-forms-textarea--regular) [Checkbox](?path=/docs/components-forms-checkbox--regular) [RadioButton](?path=/docs/components-forms-radiobutton--regular) [Search](?path=/docs/components-forms-search--regular) [NumberInput](?path=/docs/components-forms-numberinput--regular) [InputGroup](?path=/docs/components-forms-inputgroup--regular)