@xsolla/xui-checkbox 0.174.2 → 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 +42 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,6 +1,48 @@
|
|
|
1
1
|
# Checkbox
|
|
2
2
|
|
|
3
3
|
A cross-platform React checkbox component with label, description, indeterminate state, and validation support. Works on both React (web) and React Native.
|
|
4
|
+
<!-- BEGIN:xui-mcp-instructions:checkbox -->
|
|
5
|
+
Use for multiple selection of options from a list, for agreements with policies, and sometimes for enabling parameters. The Checkbox could be embedded inside other components.
|
|
6
|
+
|
|
7
|
+
Do not use when a user can choose only one option from a list — use a Radio instead.
|
|
8
|
+
|
|
9
|
+
Checkbox vs ToggleButtonGroup:
|
|
10
|
+
- Decision guide
|
|
11
|
+
|
|
12
|
+
### When to use
|
|
13
|
+
- When the user can select multiple options independently from a list
|
|
14
|
+
- For agreements and consent flows (e.g. *"I agree to the Terms of Service"*)
|
|
15
|
+
- For enabling or disabling individual parameters in a settings list
|
|
16
|
+
- When the selection does not take immediate effect and is submitted as part of a form
|
|
17
|
+
- Inside other components: table cells, ContextMenu items, list rows, and similar containers
|
|
18
|
+
|
|
19
|
+
### When not to use
|
|
20
|
+
- When only one option can be selected — use a Radio group
|
|
21
|
+
- When the change takes immediate effect — use a Switch
|
|
22
|
+
- When there are only two mutually exclusive states — use a Switch
|
|
23
|
+
|
|
24
|
+
### Content guidelines
|
|
25
|
+
- Label should describe the specific option being selected, written in sentence case: *"Send email notifications"*, *"I agree to the Terms of Service"*.
|
|
26
|
+
- Keep labels short — one line where possible. If more context is needed, use Description.
|
|
27
|
+
- Description should clarify the consequence or meaning of selecting the option. Keep it to one sentence.
|
|
28
|
+
- Error messages should be specific: *"You must agree to continue"* — not just *"Required"*.
|
|
29
|
+
|
|
30
|
+
### Behaviour guidelines
|
|
31
|
+
- Checkboxes in a list are independent — selecting one does not affect others unless an explicit parent/child relationship is defined.
|
|
32
|
+
- Unlike a Switch, a Checkbox typically requires a form submission to apply the selection. Do not trigger side effects immediately on check.
|
|
33
|
+
- When using a parent/child group with Indeterminate, ensure the parent*'s state always reflects the children'*s combined state in real time.
|
|
34
|
+
- Disabled checkboxes preserve their current value visually. Provide a tooltip explaining why the checkbox is disabled.
|
|
35
|
+
- In tables, clicking a row should not automatically check its checkbox — these are separate interactions unless explicitly designed otherwise.
|
|
36
|
+
|
|
37
|
+
### Accessibility
|
|
38
|
+
- Use role=*"checkbox"* with aria-checked=*"true"*, aria-checked=*"false"*, or aria-checked=*"mixed"* for the Indeterminate state
|
|
39
|
+
- Always associate a visible label with the checkbox via htmlFor / id
|
|
40
|
+
- Description text should be linked via aria-describedby so screen readers announce it alongside the label
|
|
41
|
+
- Error message must be linked via aria-describedby so it is announced on focus in the Error state
|
|
42
|
+
- Disabled checkboxes should use aria-disabled=*"true"* rather than the HTML disabled attribute to remain focusable
|
|
43
|
+
- The minimum touch target is 44×44px. Sizes S (16px) and M (18px) require additional padding in touch contexts
|
|
44
|
+
- The component does not define a focus ring visually — this must be implemented in code
|
|
45
|
+
<!-- END:xui-mcp-instructions:checkbox -->
|
|
4
46
|
|
|
5
47
|
## Installation
|
|
6
48
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-checkbox",
|
|
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",
|
|
@@ -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": "0.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-core": "0.175.0",
|
|
17
|
+
"@xsolla/xui-icons": "0.175.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.175.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|