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

38 lines (23 loc) • 1.9 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
--- title: Checkbox group description: Checkbox group renders a set of checkboxes. keywords: ['form', 'control', 'selection', 'choices'] --- ## Usage Use checkbox group to allow users to select multiple items from a list of individual items, or to mark one individual item as selected. ### Best practices - Put checkboxes in a logical order - If users are only allowed to select a single option, consider using a [radio group](../RadioGroup/index.md) instead - Each checkbox's state should be independent from other checkboxes in the group. For example: checking one checkbox should not check or disable any other checkboxes ## Anatomy **Label:** A title that labels the group of options and helps users understand the relationship between the options in the group. **Required indicator:** Indicates that a selection is required. **Caption:** May be used to provide additional context about the checkbox group when the label alone is not sufficient **Options:** A list of options represented using [checkboxes](../Checkbox/index.md). **Validation message:** A message explaining why the selection failed validation. See the [form pattern documentation](https://primer.style/ui-patterns/forms/overview#validation-message) for more information on form validation patterns. ## Accessibility Once a user checks an option from a checkbox group, the result should not be saved or applied until the user has explicitly submitted their input using a "save" or "submit" button. See the [saving pattern guidelines](https://primer.style/ui-patterns/saving) for more information. ## Related components - [Checkbox](../Checkbox/index.md): Used to render an individual checkbox control. - [FormControl](../FormControl/index.md): Used to group individual controls with an associated label. - [RadioGroup](../RadioGroup/index.md): Similar to `CheckboxGroup`, but used for organizing radio controls.