@xsolla/xui-multi-select 0.174.3 → 0.175.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 +64 -0
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -2,6 +2,70 @@
|
|
|
2
2
|
|
|
3
3
|
A cross-platform multi-select control that lets users pick multiple options from a dropdown list.
|
|
4
4
|
|
|
5
|
+
<!-- BEGIN:xui-mcp-instructions:multi-select -->
|
|
6
|
+
MultiSelect lets users choose several values from a predefined list at the same time. Selected values are shown inline as removable tags, so users can see and adjust their choices without reopening the menu. It is commonly used in filters, forms, and settings where more than one option can apply.
|
|
7
|
+
|
|
8
|
+
### When to use
|
|
9
|
+
|
|
10
|
+
When the user needs to pick more than one value from a fixed, known list (tags, categories, recipients, etc.)
|
|
11
|
+
|
|
12
|
+
When it helps the user to see all current selections at once, displayed as removable tags
|
|
13
|
+
- When the set of options is finite and does not require freeform typing
|
|
14
|
+
- As part of a larger form or filter bar alongside other controls
|
|
15
|
+
|
|
16
|
+
### When not to use
|
|
17
|
+
|
|
18
|
+
- When only one value can be chosen — use a Select instead
|
|
19
|
+
- When the value is freeform text the user must type — use a TextArea instead
|
|
20
|
+
- When the list is short and every option should always stay visible — use a group of Checkboxes instead
|
|
21
|
+
- When the choice is a single on/off — use a Switch or Checkbox instead
|
|
22
|
+
- When the list is very long and the user mainly needs to search rather than browse — pair the field with search or reconsider the pattern
|
|
23
|
+
|
|
24
|
+
### Content guidelines
|
|
25
|
+
|
|
26
|
+
Do not use the placeholder as a substitute for a label.
|
|
27
|
+
|
|
28
|
+
Placeholder text should prompt the action, not repeat the label (e.g. *"Select tags"*, not *"Tags"*).
|
|
29
|
+
|
|
30
|
+
Option labels should be short, parallel in structure, and ordered logically — alphabetically, by frequency, or by a meaningful sequence — rather than at random.
|
|
31
|
+
|
|
32
|
+
Each selected tag should carry the same label as its option so users can match a tag back to its source.
|
|
33
|
+
|
|
34
|
+
When selections overflow a non-flexible field, collapse the remainder into a clear *"+N"* counter (e.g. *"+5"*) rather than truncating tags.
|
|
35
|
+
|
|
36
|
+
Error messages should be constructive: explain what is wrong and how to fix it (e.g. *"Select at least one option"*, not just *"Invalid input"*).
|
|
37
|
+
|
|
38
|
+
The clear-all button should appear only when at least one value is selected.
|
|
39
|
+
|
|
40
|
+
### Behaviour guidelines
|
|
41
|
+
|
|
42
|
+
Flexible: True — the field grows vertically, wrapping selected tags onto multiple rows so every selection stays visible.
|
|
43
|
+
|
|
44
|
+
Flexible: False — the field keeps a single row; tags that don't fit collapse into a *"+N"* counter, and the full set is visible on open or hover.
|
|
45
|
+
|
|
46
|
+
Removing values — the ✕ on a tag deselects that single value; the clear-all button on the right removes every selection at once.
|
|
47
|
+
|
|
48
|
+
Selecting — opening the menu shows options with their selected state marked; choosing or unchoosing an option keeps the menu open so users can pick several in a row.
|
|
49
|
+
|
|
50
|
+
Dismissal — clicking outside the menu or pressing Escape closes the dropdown without discarding the current selection.
|
|
51
|
+
|
|
52
|
+
Validation timing — do not show errors before the user has interacted with the field. Validate on blur or on submit, and preserve the selected values when showing an error.
|
|
53
|
+
|
|
54
|
+
### Accessibility
|
|
55
|
+
|
|
56
|
+
Expose the multi-selectable nature and current selection state to assistive technology, and announce changes as values are added or removed.
|
|
57
|
+
|
|
58
|
+
Each tag's remove control must be keyboard-focusable and clearly labelled (e.g. *"Remove [value]"*).
|
|
59
|
+
|
|
60
|
+
Error messages must be linked to the field via aria-describedby so screen readers announce them on focus.
|
|
61
|
+
|
|
62
|
+
Support full keyboard operation: open and close the menu, move through options with the arrow keys, toggle selection with Enter / Space, and remove tags without a mouse.
|
|
63
|
+
|
|
64
|
+
Never rely on placeholder, tag color, or icon alone to communicate the field's purpose or state — always provide an associated label.
|
|
65
|
+
|
|
66
|
+
Disabled fields should not receive keyboard focus; consider a read-only state if the selected values still need to be accessible.
|
|
67
|
+
<!-- END:xui-mcp-instructions:multi-select -->
|
|
68
|
+
|
|
5
69
|
## Installation
|
|
6
70
|
|
|
7
71
|
```bash
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-multi-select",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.175.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-checkbox": "0.
|
|
14
|
-
"@xsolla/xui-core": "0.
|
|
15
|
-
"@xsolla/xui-dropdown": "0.
|
|
16
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-checkbox": "0.175.0",
|
|
14
|
+
"@xsolla/xui-core": "0.175.0",
|
|
15
|
+
"@xsolla/xui-dropdown": "0.175.0",
|
|
16
|
+
"@xsolla/xui-primitives-core": "0.175.0"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"react": ">=16.8.0",
|