@xsolla/xui-radio 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 +52 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,6 +2,58 @@
|
|
|
2
2
|
|
|
3
3
|
A cross-platform React radio button component for selecting one option from a group. Works standalone or with RadioGroup for coordinated selection.
|
|
4
4
|
|
|
5
|
+
<!-- BEGIN:xui-mcp-instructions:radio -->
|
|
6
|
+
A single-select control used when only one option can be chosen from a list. Radio buttons are always presented as a group — a standalone radio is not meaningful on its own.
|
|
7
|
+
|
|
8
|
+
### When to use
|
|
9
|
+
|
|
10
|
+
- When the user must choose exactly one option from a set
|
|
11
|
+
- When all options need to be visible at the same time for comparison
|
|
12
|
+
- When there are 2–6 options of equal weight
|
|
13
|
+
- Inside the Autocomplete and Select via Context-menu
|
|
14
|
+
|
|
15
|
+
### When not to use
|
|
16
|
+
|
|
17
|
+
When the user can select more than one option — use Checkbox or ToggleButtonGroup
|
|
18
|
+
- When there are many options and space is limited — use a Select
|
|
19
|
+
- When options are compact and visually equal — consider ToggleButtonGroup
|
|
20
|
+
- For a single binary toggle — use a Switch
|
|
21
|
+
|
|
22
|
+
### Content guidelines
|
|
23
|
+
|
|
24
|
+
Label each option clearly and concisely — one short phrase, no trailing punctuation.
|
|
25
|
+
|
|
26
|
+
Use parallel structure across all options in the same group (all nouns, or all short phrases).
|
|
27
|
+
|
|
28
|
+
Use Description to add clarifying context when the label alone is not sufficient.
|
|
29
|
+
|
|
30
|
+
List options in a logical order — most common first, alphabetical, or by value.
|
|
31
|
+
|
|
32
|
+
Avoid negative options (e.g. *"Do not notify me"*) — rephrase positively.
|
|
33
|
+
|
|
34
|
+
### Behaviour guidelines
|
|
35
|
+
|
|
36
|
+
Only one radio in a group can be checked at a time — selecting one automatically unchecks the others.
|
|
37
|
+
|
|
38
|
+
A radio cannot be unchecked by clicking it again. To clear a selection, a *"None"* or *"Reset"* option must be provided explicitly.
|
|
39
|
+
|
|
40
|
+
Disable items remain visible but cannot be interacted with.
|
|
41
|
+
|
|
42
|
+
The Error state is typically applied to all items in the group (or to the group container) when validation fails — not to individual items.
|
|
43
|
+
|
|
44
|
+
### Accessibility
|
|
45
|
+
|
|
46
|
+
Wrap the group in a <fieldset> with a <legend> that names the group, or use role=*"radiogroup"* with aria-labelledby.
|
|
47
|
+
|
|
48
|
+
Each radio input should use role=*"radio"* with aria-checked=*"true"* or *"false"*.
|
|
49
|
+
|
|
50
|
+
Apply aria-disabled=*"true"* to disabled items.
|
|
51
|
+
|
|
52
|
+
Error messages should be linked to the group via aria-describedby.
|
|
53
|
+
|
|
54
|
+
Never rely on color alone to communicate the error state — always show the error message text.
|
|
55
|
+
<!-- END:xui-mcp-instructions:radio -->
|
|
56
|
+
|
|
5
57
|
## Installation
|
|
6
58
|
|
|
7
59
|
```bash
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-radio",
|
|
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,8 +13,8 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-core": "0.
|
|
17
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-core": "0.175.0",
|
|
17
|
+
"@xsolla/xui-primitives-core": "0.175.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|