Skip to main content

useRadioGroup

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

Import

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

Allied components

Radio
Contact method
Selected: email
"use client";

import { Radio, Stack, Text, useRadioGroup } from "@vortexlabs/vortex";

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

  return <Text>Selected: {group.value || "None"}</Text>;
};

export const UseRadioGroupExample = () => (
  <Radio.Group name="radio-contact-method" defaultValue={"email"}>
    <Radio.GroupLabel>Contact method</Radio.GroupLabel>
    <Stack gap={3}>
      <Radio.Item value="email">Email</Radio.Item>
      <Radio.Item value="sms">SMS</Radio.Item>
      <Selection />
    </Stack>
  </Radio.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 Radio.Group; a group returned by the same component does not provide context to that call.

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