You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Sizes are controlled with [`data-size`](/en/fundamentals/code/sizes) and colors with [`data-color`](/en/fundamentals/code/colors). The component will inherit these from the nearest parent.
Checkbox is `ds-input` with `type="checkbox"`, so variables and data attributes that apply to [input](/en/components/docs/input/overview) also apply to checkbox.
8
+
9
+
<CssAttributes />
10
+
11
+
<CssVariables />
9
12
10
-
<Checkboxlabel="Checkbox label"value="value" />
11
-
```
12
13
13
14
## Examples
14
15
15
16
### Grouping
16
17
17
-
Use [`Fieldset`](/en/components/docs/fieldset/code)and `useCheckboxGroup`for grouping multiple options.
18
+
Use [fieldset](/en/components/docs/fieldset/code) for grouping multiple choices.
18
19
19
20
<Storystory="GroupEn" />
20
21
22
+
21
23
### Outline
22
-
`variant="outline"` adds extra padding and a border around the selection, increasing the clickable area.
24
+
`data-variant="outline"` adds extra padding and a border around the selection to create a larger clickable area.
23
25
24
26
<Storystory="OutlineEn" />
25
27
26
-
### Indeterminate checkbox
27
28
28
-
Add `allowIndeterminate: true` to `getCheckboxProps` to create a parent `Checkbox` that can select or clear all options.
29
-
This activates an additional state, `indeterminate`, next to `checked` and `unchecked`.
30
-
It is displayed with a horizontal line when one or more `Checkbox` are selected in the group.
31
-
It will be displayed as a regular `Checkbox` if everyone in the group has the same state.
32
-
33
-
<Storystory="InTableEn" />
34
-
35
-
## HTML
36
-
37
-
`Checkbox` is a composite component, so in HTML you have to build it from multiple components.
38
-
We use [`Fieldset`](/en/components/docs/fieldset/code), [`Label`](/en/components/docs/label/code) and [`Input`](/en/components/docs/input/code) to create a `Checkbox`.
39
-
40
-
The code below shows how you can visually build a `Checkbox` in HTML, but you have to make sure that `<input>` is connected to `<label>` and description.
In React, building a checkbox is simpler, because we have a ready-made component that handles most of the logic and state management for us.
32
+
33
+
`Checkbox` is a composite component that uses [field](/en/components/docs/field/overview), [label](/en/components/docs/label/overview), [validation message](/en/components/docs/validation-message/overview), and [input](/en/components/docs/input/overview) to create a checkbox.
58
34
59
-
### In Fieldset
60
-
61
-
The code below is an example of how to use `Checkbox` inside `<fieldset>`.
62
-
Note that we only show one `Checkbox' here, in practice this will often be several.
63
-
64
-
```html
65
-
<fieldsetclass="ds-fieldset">
66
-
<legendclass="ds-label"data-weight="medium">How would you prefer us to contact you?</legend>
67
-
<pclass="ds-paragraph"data-variant="default">Select all the options that are relevant to you.</p>
68
-
<divclass="ds-field">
69
-
<input
70
-
class="ds-input"
71
-
type="checkbox"
72
-
value="email"
73
-
id="check-input"
74
-
>
75
-
<label
76
-
class="ds-label"
77
-
data-weight="regular"
78
-
for="check-input"
79
-
>Email</label>
80
-
</div>
81
-
</fieldset>
35
+
We also have a dedicated [useCheckboxGroup](/en/components/utilities/use-checkbox-group) React hook to make it easier to manage a group of Checkbox components.
Checkbox is a composite component, so we show variables and data attributes from `ds-input` here.
86
-
<CssVariables />
43
+
<ReactComponentDocs />
87
44
88
-
<CssAttributes />
45
+
46
+
### Indeterminate checkbox
47
+
48
+
Use [useCheckboxGroup](/en/components/utilities/use-checkbox-group) to create a parent checkbox that can select or clear all options in the group.
49
+
50
+
This activates an additional state, `indeterminate`, alongside `checked` and `unchecked`. It is shown as a horizontal line when one or more checkboxes are selected in the group. It is shown as a regular checkbox when all checkboxes in the group share the same state.
51
+
52
+
This is enabled by setting `allowIndeterminate: true` in `getCheckboxProps`.
- the user should be able to select one or more options within the same context
9
9
- the user needs to accept terms and conditions
10
10
11
-
**Avoid using `Checkbox` when**
12
-
- the user should choose only one option; use a [`Radio`](/en/components/docs/radio/overview) instead
13
-
- the user must choose from more than seven options; use a [`Select`](/en/components/docs/select/overview) or [`Suggestion`](/en/components/docs/suggestion/overview) instead
14
-
- something should be turned on or off; use a [`Switch`](/en/components/docs/switch/overview) instead
11
+
**Avoid checkbox when**
12
+
- the user should choose only one option; use a [radio](/en/components/docs/radio/overview) instead
13
+
- the user must choose from more than seven options; use a [select](/en/components/docs/select/overview) or [suggestion](/en/components/docs/suggestion/overview) instead
14
+
- something should be turned on or off; use a [switch](/en/components/docs/switch/overview) instead
15
15
16
16
## Example
17
17
18
-
### Confirmation with `Checkbox`
18
+
### Confirmation with checkbox
19
19
20
-
If the user must confirm something rather than choose between alternatives, a single `Checkbox` can stand alone. For example, when the user needs to confirm that something is correct or give consent to terms and conditions.
20
+
If the user must confirm something rather than choose between alternatives, a single checkbox can stand alone. For example, when the user needs to confirm that something is correct or give consent to terms and conditions.
21
21
22
-
A `Checkbox` for consent must always require an active action, and you should never preselect the box. This ensures that the consent is given voluntarily.
22
+
A checkbox for consent must always require an active action, and you should never preselect the box. This ensures that the consent is given voluntarily.
23
23
24
24
<Storystory="OneOption" />
25
25
26
26
### Grouping
27
27
28
-
Most of the time, `Checkbox` is used in groups where the user can select more than one option. The `<fieldset>` around the group should have a legend that explains what the options relate to.
28
+
Most of the time, checkbox is used in groups where the user can select more than one option.
29
29
30
30
<Storystory="GroupEn" />
31
31
32
-
### Outline
33
-
`variant="outline"` adds extra padding and a border around the selection, increasing the clickable area.
32
+
### With error
33
+
When checkboxes are used in groups, the error message should be shown collectively for the entire group.
34
34
35
-
<Storystory="OutlineEn" />
35
+
<Storystory="WithError" />
36
36
37
-
### With error
37
+
### Outline
38
+
In some cases, it may be appropriate to emphasise options by using a larger click area around the checkbox.
38
39
39
-
When `Checkbox` is used in groups, the error message should be placed on the `Fieldset`, so it applies to the entire group.
40
+
This can for example be appropriate when:
41
+
- the option represents a clear decision point that should stand out in the interface
42
+
- related information (such as descriptions and additional details) should be perceived as a single, coherent interaction
43
+
- standard checkboxes would result in a visually weak layout
40
44
41
-
<Storystory="WithError" />
45
+
<Storystory="OutlineEn" />
42
46
43
47
### Read-only checkbox
44
48
45
-
`Checkbox` supports the `readOnly` attribute to make the field non-editable and gives a visual indication that distinguishes it from editable fields. Although they cannot be changed, fields with `readOnly` are still part of the tab order, and the information is included when the form is submitted.
49
+
Checkbox supports the `readOnly` attribute to make the field non-editable and gives a visual indication that distinguishes it from editable fields. Although they cannot be changed, fields with `readOnly` are still part of the tab order, and the information is included when the form is submitted.
46
50
47
51
We avoid using `readOnly` whenever possible because such fields can be confusing. Not all users will understand why they cannot change the content.
48
52
49
53
<Storystory="ReadOnly" />
50
54
51
55
### Disabled
52
56
53
-
We should avoid disabling (`disabled`) `Checkbox`, because it can be difficult to perceive.
54
-
Some users will not understand what the option means or why it is not clickable. If a `Checkbox` or group of `Checkbox` options is not relevant, it is usually better to remove them rather than disable them. If possible, give users an explanation of why options are unavailable.
57
+
We should avoid disabling (`disabled`) checkbox, because it can be difficult to perceive.
58
+
Some users will not understand what the option means or why it is not clickable. If a checkbox or group of checkbox options is not relevant, it is usually better to remove them rather than disable them. If possible, give users an explanation of why options are unavailable.
55
59
56
60
Nav has a helpful explanation of [why disabled states are problematic (nav.no)](https://aksel.nav.no/god-praksis/artikler/deaktiverte-tilstander) and which alternatives exist.
57
61
58
62
<Storystory="Disabled" />
59
63
60
64
## Guidelines
61
65
62
-
Use `Checkbox` when the user can select one or more options.
66
+
Use checkbox when the user can select one or more options.
63
67
64
68
### Sort the options
65
69
@@ -71,10 +75,10 @@ Preferably place the response options vertically. This makes it easier to scan t
71
75
72
76
<divclassName="dodont-row">
73
77
<DoDontstory="DoPlacement">
74
-
Place `Checkbox` vertically for improved readability.
78
+
Place checkbox vertically for improved readability.
75
79
</DoDont>
76
80
<DoDontstory="DontPlacement">
77
-
Avoid placing `Checkbox` horizontally, as it reduces readability.
81
+
Avoid placing checkbox horizontally, as it reduces readability.
Copy file name to clipboardExpand all lines: apps/www/app/content/components/checkbox/metadata.json
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,11 @@
1
1
{
2
2
"no": {
3
3
"title": "Checkbox",
4
-
"subtitle": "`Checkbox` gir brukerne mulighet til å velge ett eller flere alternativer. Den kan også brukes i tilfeller der brukeren skal bekrefte noe. "
4
+
"subtitle": "Checkbox gir brukerne mulighet til å velge ett eller flere alternativer. Den kan også brukes i tilfeller der brukeren skal bekrefte noe. "
5
5
},
6
6
"en": {
7
7
"title": "Checkbox",
8
-
"subtitle": "`Checkbox` allows users to select one or more options. It can also be used in situations where the user needs to confirm something."
8
+
"subtitle": "Checkbox allows users to select one or more options. It can also be used in situations where the user needs to confirm something."
0 commit comments