@xsolla/xui-input 0.174.3 → 0.176.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,6 +1,52 @@
|
|
|
1
1
|
# Input
|
|
2
2
|
|
|
3
3
|
A cross-platform text input with label, error, icon, clear and validation support; works on web and React Native via `XUIProvider` themed contexts.
|
|
4
|
+
<!-- BEGIN:xui-mcp-instructions:input -->
|
|
5
|
+
An interactive field that lets users enter, edit, or review information. Inputs communicate what kind of data is expected and help users provide the information needed to complete tasks, make updates, or refine content across the product.
|
|
6
|
+
|
|
7
|
+
### When to use
|
|
8
|
+
|
|
9
|
+
When you need to collect a short, freeform text value from a user (name, email, search query, etc.)
|
|
10
|
+
- When the expected input fits on a single line
|
|
11
|
+
- As part of a larger form alongside other controls
|
|
12
|
+
|
|
13
|
+
### When not to use
|
|
14
|
+
|
|
15
|
+
- When the expected input spans multiple lines — use a TextArea instead
|
|
16
|
+
- When the user must pick from a predefined list — use a Select, MultiSelect or Autocomplete instead
|
|
17
|
+
- When the value is numeric with constraints — use a InputPhone or InputRange instead
|
|
18
|
+
- When the value is card number — use a InputPayment instead
|
|
19
|
+
- When the value is time or date — use a InputTime or DatePicker instead
|
|
20
|
+
- When the value is pin code — use a InputPin instead
|
|
21
|
+
|
|
22
|
+
### Content guidelines
|
|
23
|
+
|
|
24
|
+
Do not use the placeholder as a substitute for a label.
|
|
25
|
+
|
|
26
|
+
Placeholder text should describe the expected format or example value (e.g. *"Enter your email"*, *"DD/MM/YYYY"*), not repeat the label.
|
|
27
|
+
|
|
28
|
+
Error messages should be constructive: explain what is wrong and how to correct it (e.g. *"Email is required"*, not just *"Invalid input"*).
|
|
29
|
+
|
|
30
|
+
Remove button should appear only when the field has a value, giving users a quick way to clear it.
|
|
31
|
+
|
|
32
|
+
Check icon should appear after successful validation to confirm the value is accepted.
|
|
33
|
+
|
|
34
|
+
### Behavior guidelines
|
|
35
|
+
|
|
36
|
+
Input width — fields should reflect the expected content length; avoid overly wide fields for short values like ZIP code, OTP, or CVV unless the layout requires it.
|
|
37
|
+
|
|
38
|
+
Validation timing — do not show errors before a user has interacted with the field. Validate on blur, on submit, or progressively while typing only when it meaningfully helps.
|
|
39
|
+
|
|
40
|
+
Error state — preserve the user’s entered value, show error text close to the field, and do not rely on color alone to communicate the problem.
|
|
41
|
+
|
|
42
|
+
### Accessibility
|
|
43
|
+
|
|
44
|
+
Error messages must be linked to the input via `aria-describedby` so screen readers announce them on focus.
|
|
45
|
+
|
|
46
|
+
Never rely on placeholder text alone to communicate the field's purpose — it disappears on input and has low contrast by default.
|
|
47
|
+
|
|
48
|
+
Disabled fields should not receive keyboard focus; consider using a read-only state if the value still needs to be accessible.
|
|
49
|
+
<!-- END:xui-mcp-instructions:input -->
|
|
4
50
|
|
|
5
51
|
## Installation
|
|
6
52
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-input",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.176.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-core": "0.
|
|
17
|
-
"@xsolla/xui-icons-base": "0.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-core": "0.176.0",
|
|
17
|
+
"@xsolla/xui-icons-base": "0.176.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.176.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|