|
1 | 1 | **`False`** For a square finish. |
2 | 2 |
|
3 | 3 | **`True`** For a finish with rounded corner. To be favored in more emotional, immersive contexts or those tied to specific visual identities. For standard or business-oriented journeys, keep the default corners. This evolution addresses the need for flexibility in adapting the design to certain brand contexts. |
4 | | - |
5 | | -### Do & don'ts |
6 | | - |
7 | | -✅ **Do:** Use rounded corners consistently with other form elements in your design system to maintain visual harmony |
8 | | -❌ **Don't:** Apply rounded corners to quantity inputs while using square corners on adjacent buttons or fields |
9 | | - |
10 | | -✅ **Do:** Reserve rounded corners for consumer-facing or lifestyle brand interfaces where softer aesthetics align with brand identity |
11 | | -❌ **Don't:** Use rounded corners in enterprise or data-heavy applications where sharp edges convey precision |
12 | | - |
13 | | -✅ **Do:** Consider rounded corners for mobile interfaces where they may improve perceived touch targets |
14 | | -❌ **Don't:** Assume rounded corners automatically improve usability—they are primarily a visual treatment |
15 | | - |
16 | | -✅ **Do:** Document your corner radius choice in design tokens for consistent application across components |
17 | | -❌ **Don't:** Mix corner radius values arbitrarily across different quantity input instances |
18 | | - |
19 | | -✅ **Do:** Test rounded corner variants with your specific button placement (trailing vs. split) to ensure visual balance |
20 | | -❌ **Don't:** Apply rounded corners without verifying they work well with increment/decrement button styling |
21 | | - |
22 | | ---- |
23 | | - |
24 | | -### Input status |
25 | | - |
26 | | -**`Empty`** The Empty state indicates that the quantity input is blank with no content or placeholder, a neutral starting point. |
27 | | - |
28 | | -**`Empty (Placeholder)`** The Empty with Placeholder state provides a hint or guidance inside the field to suggest expected input. |
29 | | - |
30 | | -**`Filled`** The Filled state shows that the user has entered valid content into the field, replacing any placeholder. |
31 | | - |
32 | | -### Do & don'ts |
33 | | - |
34 | | -✅ **Do:** Set a sensible default value (typically 1) to reduce user effort and prevent empty submission errors |
35 | | -❌ **Don't:** Leave quantity inputs empty in e-commerce contexts where a zero value has no valid meaning |
36 | | - |
37 | | -✅ **Do:** Use placeholder text to indicate expected format when the field can be empty (e.g., "Enter quantity") |
38 | | -❌ **Don't:** Rely solely on placeholders for critical instructions—they disappear once users begin typing |
39 | | - |
40 | | -✅ **Do:** Ensure filled state styling provides clear feedback that user input has been captured |
41 | | -❌ **Don't:** Style filled and empty states identically, making it difficult to scan form completion status |
42 | | - |
43 | | -✅ **Do:** Preserve entered values when users navigate away and return to the form |
44 | | -❌ **Don't:** Reset quantity values unexpectedly, forcing users to re-enter their selections |
45 | | - |
46 | | -✅ **Do:** Validate and display the filled state immediately when users type valid numbers |
47 | | -❌ **Don't:** Delay visual confirmation of valid input, leaving users uncertain if their entry was accepted |
0 commit comments