Checkbox Tree

View source Report an issue

CheckboxTree is a component that represents checkbox controls in a hierarchical or tree-like structure, where items are organised into parent nodes and child nodes.

It is a combination component comprised of Tree and CheckboxGroup and shares most of the properties of these two components.

Can be used controlled or uncontrolled.

Examples

<CheckboxTree className="w-75">
        <CheckboxTree.Item value={1}><Icon is={Person} /> One</CheckboxTree.Item>
        <CheckboxTree.Item value={2}>Two</CheckboxTree.Item>
        <CheckboxTree.Collapsible>
          <CheckboxTree.CollapsibleTrigger title="This is used for accessibility when someone hovers over/focuses the checkbox since it has no value for `.AllItem`." label="This is used for a11y when someone focuses the collapsable trigger."><Icon is={Person} />Trigger 1</CheckboxTree.CollapsibleTrigger>
          <CheckboxTree.CollapsibleContent>
            <CheckboxTree.Item value="nested 1"><Icon is={Person} />Nested: One</CheckboxTree.Item>
            <CheckboxTree.Item value={4}>Nested: Two</CheckboxTree.Item>
          </CheckboxTree.CollapsibleContent>
        </CheckboxTree.Collapsible>
        <CheckboxTree.Collapsible defaultOpen={true}>
          <CheckboxTree.CollapsibleTrigger title="All administrators" label="Open: Show individual administrators"><Icon is={Person} />Administrators</CheckboxTree.CollapsibleTrigger>
          <CheckboxTree.CollapsibleContent>
            <CheckboxTree.Item value="bob">Bob</CheckboxTree.Item>
            <CheckboxTree.Item value="alice">Alice</CheckboxTree.Item>
            <CheckboxTree.Collapsible>
              <CheckboxTree.CollapsibleTrigger title="All special admins" label="Open: Show special admins">Special Admins</CheckboxTree.CollapsibleTrigger>
              <CheckboxTree.CollapsibleContent>
                <CheckboxTree.Item value={7}>Admin 7</CheckboxTree.Item>
                <CheckboxTree.Item value={8}>Admin 8</CheckboxTree.Item>
                <CheckboxTree.Item value="nine">Admin 9</CheckboxTree.Item>
                <CheckboxTree.Collapsible>
                  <CheckboxTree.CollapsibleTrigger title="further nested all checkbox" label="Open: Nested"><Icon is={Person} />Nested</CheckboxTree.CollapsibleTrigger>
                  <CheckboxTree.CollapsibleContent>
                    <CheckboxTree.Item value={10}>Longname Willget Truncated</CheckboxTree.Item>
                    <CheckboxTree.Collapsible>
                      <CheckboxTree.CollapsibleTrigger title="even further nested all checkbox" label="Open: Nested nested">Nested Nested</CheckboxTree.CollapsibleTrigger>
                      <CheckboxTree.CollapsibleContent>
                        <CheckboxTree.Item value="nested 5">Nested: #5</CheckboxTree.Item>
                      </CheckboxTree.CollapsibleContent>
                    </CheckboxTree.Collapsible>
                  </CheckboxTree.CollapsibleContent>
                </CheckboxTree.Collapsible>
              </CheckboxTree.CollapsibleContent>
            </CheckboxTree.Collapsible>
          </CheckboxTree.CollapsibleContent>
        </CheckboxTree.Collapsible>
      </CheckboxTree>

API Reference

CheckboxTree

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`checked`	`(string \| number \| readonly string[] \| undefined)[]`	-	-
`onCheckedChange`	`(checked: (string \| number \| readonly string[] \| undefined)[]) => void`	-	-

CheckboxTree.Collapsible

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`defaultOpen`	`boolean`	-	-
`disabled`	`boolean`	-	-
`onOpenChange`	`(open: boolean) => void`	-	-
`open`	`boolean`	-	-

CheckboxTree.CollapsibleTrigger

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`label`	`string`	-
`onCheckedChange`	`(checked: CheckedState) => void`	-	-
`size`	`"md"` \| `"lg"`	-	-
`state`	`"error"`	-	-

CheckboxTree.CollapsibleContent

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`forceMount`	`true`	-	-

CheckboxTree.Item

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`onCheckedChange`	`(newChecked: boolean) => void`	-	-
`size`	`"md"` \| `"lg"`	-	-
`state`	`"error"`	-	-