Skip to main content

useCheckboxGroup

useCheckboxGroup is a hook that reads the nearest Checkbox.Group, such as showing its current selection in a summary.

Import

import { useCheckboxGroup } from '@vortexlabs/vortex';

Allied components

Checkbox
Contact method
Selected: email
"use client";

import { Checkbox, Stack, Text, useCheckboxGroup } from "@vortexlabs/vortex";

const Selection = () => {
  const group = useCheckboxGroup();
  if (!group) return null;

  return <Text>Selected: {group.value?.join(", ") || "None"}</Text>;
};

export const UseCheckboxGroupExample = () => (
  <Checkbox.Group name="checkbox-contact-method" defaultValue={["email"]}>
    <Checkbox.GroupLabel>Contact method</Checkbox.GroupLabel>
    <Stack gap={3}>
      <Checkbox.Item value="email" label="Email" />
      <Checkbox.Item value="sms" label="SMS" />
      <Selection />
    </Stack>
  </Checkbox.Group>
);

Features

  • Reads the closest group's selection and shared state.
  • Updates when the group value changes.
  • Returns null outside the group.

The hook takes no arguments. Call it in a descendant of Checkbox.Group; a group returned by the same component does not provide context to that call.

Use Checkbox.Item for selectable controls. It handles input events and accessibility. See Checkbox for controlled state and group setup.