Feature Requests

📌 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.

Some use cases might warrant a traditional way to edit the value, compared to using the slider ring. For instance when very precise inputs are needed, but the orientation of the slider is still useful for visualisation. You could either replace ValueText by ValueInput (the readonly prop would allow achieving the current behaviour), or make them 2 separate parts and let consumers use both. This can already be achieved by modifying the AngleSlider, but a built-in solution would be cleaner.

Currently this works for Select, Number Input, Combobox, ColorPicker and most others. Would be nice to have this with DatePicker as well.

a component that allows dragging and dropping. Here are a couple of examples using dndkit: https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/core-draggable-hooks-usedraggable--basic-setup dndkit is super complete, but it is probably too low-level for most users, so primitives with this functionality would be awesome!

Add a bottom drawer component with snappoints for a mobile experience. Examples: https://vaul.emilkowal.ski/ https://codesandbox.io/p/sandbox/quirky-tharp-or0qip?file=%2Fsrc%2FApp.js%3A2%2C9

Could you re-export these types? import { FileMimeType, FileError } from '@zag-js/file-utils'; export { FileError, FileMimeType } from '@zag-js/file-utils';

Example: https://catamphetamine.gitlab.io/react-phone-number-input/

Currently number input doesn't accept any placeholder.

When using min or max attribute, months and years are rendered with a data-disabled attribute but this information is not available when rendering the cells. In our case, we're using custom Button to render each cell, and we would like to set them as disabled (using a React prop on the Button component), but it is quite difficult to achieve. (we partially made it using refs, but behaviour on current month was very weird, plus it felt very hacky) What would be nice, is to have the disabled information in the cell, which would allow us to do something like: <DatePicker.TableBody> { datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( <DatePicker.TableRow key={ id }> { years.map((year, i) => ( <DatePicker.TableCell key={ i } value={ year.value }> <DatePicker.TableCellTrigger asChild> <Button disabled={ year.disabled } // <= this would be nice to add ...> { year.label } </Button> </DatePicker.TableCellTrigger> </DatePicker.TableCell> )) } </DatePicker.TableRow> )) } </DatePicker.TableBody>