Dennis GĂśring
📌 Summary
Expose the
useCheckboxGroup
hook and the
<Checkbox.GroupProvider>
component to allow manual creation and contextual provisioning of a checkbox group — consistent with how other primitives (like useDialog + DialogProvider) operate in Ark UI.
🔎 Context
Ark UI internally uses a state machine to manage checkbox groups, but this is currently only accessible via the CheckboxGroup component props. Other components in the library (e.g., Dialog, Tabs, Combobox) already expose their state machines and providers, making them more flexible and composable.
Let’s bring checkbox groups up to that level of power.
🎯 Motivation
• Enable advanced use cases: “Select All”, validation, deeply nested group logic, etc.
• Improve integration with state management/form libraries.
• Avoid awkward prop drilling for deeply nested checkboxes or helper components.
• Align with the compositional API used elsewhere in Ark UI.
✅ Proposed API
import { useCheckboxGroup, Checkbox } from '@ark-ui/react'
const group = useCheckboxGroup({
name: 'fruits',
value: selectedValues,
onChange: setSelectedValues,
})
return (
<Checkbox.GroupProvider value={group}>
<Checkbox.Root value="apple">
<Checkbox.Label>Apple</Checkbox.Label>
<Checkbox.Control />
</Checkbox.Root>
<Checkbox.Root value="banana">
<Checkbox.Label>Banana</Checkbox.Label>
<Checkbox.Control />
</Checkbox.Root>
<SelectAllCheckbox />
</Checkbox.GroupProvider>
)
And an example helper component:
function SelectAllCheckbox() {
const group = useCheckboxGroupContext() // if exposed
const allValues = ['apple', 'banana']
const isAllSelected = allValues.every(val => group.value.includes(val))
return (
<button
onClick={() =>
group.setValue(isAllSelected ? [] : allValues)
}
>
{isAllSelected ? 'Uncheck All' : 'Check All'}
</button>
)
}
🔐 Implementation Notes
•
useCheckboxGroup()
should return the full state machine API.
•
<Checkbox.GroupProvider value={...} />
will inject context to all nested
<Checkbox.Root>
components.
• Optional: expose useCheckboxGroupContext() for downstream access.
✅ Benefits
• Encourages composable, decoupled checkbox UIs.
• Unlocks advanced checkbox group logic.
• Matches existing patterns in Ark UI (Dialog, Tabs, Menu, etc.).
• Fully backward-compatible with current CheckboxGroup prop-based usage.