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
Allows users to visually select an option by "checking" it.
13
13
14
14
<Showcasename="hero" />
15
-
###Anatomy
15
+
## Anatomy
16
16
17
17
<AnatomyTable
18
18
propDescriptors={[
19
19
{
20
20
name: 'Checkbox.Root',
21
21
description:
22
-
'Defines the component boundary and exposes its internal logic; must wrap over all other parts',
22
+
'Defines the component boundary and exposes its internal logic AND must wrap over all other parts',
23
23
},
24
24
{
25
25
name: 'Checkbox.Indicator',
26
-
description: 'Wrapper that automatically handles show & hide logic for you',
26
+
description:
27
+
'Wrapper that automatically shows its children when true and hides them when false',
27
28
},
28
29
]}
29
30
/>
30
31
31
-
### API
32
+
##Examples
32
33
33
-
<AnatomyTable
34
-
propDescriptors={[
35
-
{
36
-
name: 'checkboxSig',
37
-
description: 'Defined at the root; binds the value to a boolean signal',
38
-
},
39
-
{
40
-
name: 'checklist',
41
-
description:
42
-
"Defined at the root; makes the checkbox be treated as a tri-state checkbox AND binds it's value over all other checkboxes inside a checklist",
43
-
},
44
-
]}
45
-
/>
46
-
### API examples #### Controlled Checkbox
34
+
### Controlled Checkbox
35
+
36
+
You can bind the internal value of a checkbox to a user-defined signal:
47
37
48
38
<Showcasename="controlled" />
49
39
50
-
This example shows that you can pass down your own signal to handle the boolean logic. Note that the initial value of your signal will affect the initial value of the checkbox.
40
+
Do keep in mind that the inital value of the signal WILL affect the initial value of the checkbox.
41
+
42
+
In the example below, the left checkbox was bindided to a signal with an inital value of false while the right checkbox was bindded to a signal with an inital falue of true.
43
+
44
+
<Showcasename="controlled-values" />
51
45
52
-
###Customization & Caveats
46
+
## Customization & Caveats
53
47
54
48
The Checkbox is made from the ground up to be as customizable as possible.
55
49
@@ -60,3 +54,22 @@ You can define your own CSS classes on every part of the component as if it were
60
54
Due to the implementation of the Checkbox element being a div with the role of checkbox, any text present inside the Checkbox Root is interpreted as the checkbox label.
61
55
62
56
This also means that any text tag is stripped from its semantic meaning. In other words, passing an h1 tag is treated the same as passing a p tag: they are both treated as if you passed no tag at all. See [this](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role#all_descendants_are_presentational) section of MDN for a more detailed explenation.
57
+
58
+
## API
59
+
60
+
### Checkbox.Root
61
+
62
+
<AnatomyTable
63
+
propDescriptors={[
64
+
{
65
+
name: 'bind:checked',
66
+
description:
67
+
'two-way data bind of the value of the checkbox to a user-defined signal',
68
+
},
69
+
{
70
+
name: 'checklist',
71
+
description:
72
+
"when true makes the checkbox be treated as a tri-state checkbox AND binds it's value over all other checkboxes inside the checklist",
0 commit comments