UNPKG

@primer/react-brand

Version:

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

primer.style/brand

primer/brand

64 lines (36 loc) • 2.79 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
--- title: Radio description: Use the radio component when a user needs to select one option from a list. keywords: ['radio button', 'selection', 'input', 'form', 'option', 'single choice'] --- ## Anatomy ![An image displaying a Radio with a radio and label.](https://github.com/primer/brand/assets/131988618/d25dafb9-87f8-4b6a-a205-57a851d47b5e) - Radio: A selection control. - Label: A description for the radio. ## Usage Use the radio component to enable users to select a single option from a list. For scenarios that allow for multiple selections, use the [Checkbox](../Checkbox/index.md) component instead. Keep the radio label descriptive and concise: aim for no more than 3 words. Write labels in sentence case and without ending in punctuation. ### Grouping To group related radio components together in a list, use the [Stack](../../layout/Stack/index.md) and [FormControl](../FormControl/index.md) components. When rendering a group of radio components, make sure to consider all potential option. Remember to include "None" or "Other" options when necessary. **✅ Do** ![](https://github.com/primer/brand/assets/131988618/151c50cb-c3ac-4790-901d-a5be38fad46e) _Ensure radio options are are mutually exclusive. Include "None" or "Other" options when necessary._ **❌ Don't** ![](https://github.com/primer/brand/assets/131988618/5d25cfee-bf8e-4b93-93da-5dd40f38f3be) _Don't overlap or leave out potential radio options from the list._ **✅ Do** ![](https://github.com/primer/brand/assets/131988618/433d5deb-0395-4d24-8f5d-513178d9e944) _When used in groups, order the radio options in a logical order (e.g. smallest to largest)._ **❌ Don't** ![](https://github.com/primer/brand/assets/131988618/9d3f4639-c064-4b18-bcce-89a05a29b4e1) _Don't order radio options without logic in a group._ ### States Radios have static dimensions and three different states: default, checked, and disabled. ![](https://github.com/primer/brand/assets/131988618/94a893a6-0063-4204-a7ab-da7b5aaaa96b) ## Accessibility Please use [FormControl](../FormControl/index.md) to render a standard radio input field. If using standalone, it should always be accompanied by a corresponding `<label>` to improve support for assistive technologies. ## Related components - [Checkbox](../Checkbox/index.md): Use the checkbox component to select one or more options of a limited number of choices. - [Select](../Select/index.md): Use the select component to enable selection of one option from a list. - [FormControl](../FormControl/index.md): Use the form control component to display form inputs alongside labels, validation and more. - [Stack](../../layout/Stack/index.md): Use the stack component to create a layout for its immediate children along the vertical or horizontal axis.