UNPKG

@atlaskit/radio

Version:

A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.

atlassian.design/components/radio/

76 lines (75 loc) • 3.34 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
[ { "name": "Radio", "package": "@atlaskit/radio", "import": { "name": "Radio", "package": "@atlaskit/radio", "type": "named" }, "keywords": ["radio", "button", "input", "form", "selection", "choice", "option"], "categories": ["form", "interaction"], "shortDescription": "A radio button component for single selection from a set of mutually exclusive choices. Use for custom radio button presentations like options in tables or when you need fine control over individual radio buttons.", "status": "general-availability", "accessibilityGuidelines": [ "Include error messages for required or invalid radio fields", "Never preselect high-risk options for payment, privacy, or security", "Don't use disabled radio buttons if they need to remain in tab order", "Use validation instead of disabled state for better accessibility" ], "usageGuidelines": [ "Use for custom radio button presentations (e.g., options in tables)", "Use when you need fine control over individual radio buttons", "List options in logical order (most likely to least likely)", "Make one option the default (safest, most secure option)", "Add 'None' option if unselected state is needed", "Add 'Other' option if not all options can be listed" ], "contentGuidelines": [ "Use clear, descriptive labels that provide context", "Keep labels concise but informative", "Use sentence case for labels", "Avoid alphabetical ordering (not localizable)", "Avoid overlapping or skipping numeric choices" ], "generativeInstructions": "./docs/ai/radio-instructions.md", "examples": ["./examples/ai/radio.tsx"] }, { "name": "RadioGroup", "package": "@atlaskit/radio", "import": { "name": "RadioGroup", "package": "@atlaskit/radio", "type": "named" }, "keywords": ["radio", "group", "form", "selection", "choice", "options", "list"], "categories": ["form", "interaction"], "shortDescription": "A radio group component that presents a list of options where only one choice can be selected. Use for most radio button scenarios where you want a simple list of mutually exclusive options.", "status": "general-availability", "accessibilityGuidelines": [ "Include error messages for required or invalid radio fields", "Never preselect high-risk options for payment, privacy, or security", "Don't use disabled radio buttons if they need to remain in tab order", "Use validation instead of disabled state for better accessibility", "Ensure proper keyboard navigation with arrow keys" ], "usageGuidelines": [ "Use for most radio button scenarios with simple option lists", "List options in logical order (most likely to least likely)", "Make one option the default (safest, most secure option)", "Add 'None' option if unselected state is needed", "Add 'Other' option if not all options can be listed", "Use select component for longer lists of options" ], "contentGuidelines": [ "Use clear, descriptive labels that provide context", "Keep labels concise but informative", "Use sentence case for labels", "Avoid alphabetical ordering (not localizable)", "Avoid overlapping or skipping numeric choices" ], "generativeInstructions": "./docs/ai/radio-group-instructions.md", "examples": ["./examples/ai/radio-group.tsx"] } ]