RadioGroup

Tier: client

ImportCopy Anchor Link

import { Radio, RadioGroup } from '@nizivo/react/radio-group';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css and @nizivo/react/css/fieldset.css and @nizivo/react/css/inline-error.css
import '@nizivo/react/css/radio-group.css';

A required RadioGroup keeps the browser's own validation bubble; it does not show an inline message or set aria-invalid until you pass error. Mixing it with Field-wired controls in one native-validated form is covered on Field.

Static or interactiveCopy Anchor Link

Client. The fieldset, legend, description and error are server HTML, and the radios' client leaf always ships with them. Native radios that share a name keep arrow keys and one checked radio before hydration. How to choose.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Radio, RadioGroup } from '@nizivo/react/radio-group';

export function RadioGroupExample(): JSX.Element {
  return (
    <RadioGroup legend="Shipping" name="shipping" defaultValue="standard">
      <Radio value="standard">Standard shipping</Radio>
      <Radio value="express">Express shipping</Radio>
      <Radio value="pickup" disabled>
        Store pickup (no stores yet)
      </Radio>
    </RadioGroup>
  );
}

import type { JSX } from 'react';
import { Radio, RadioGroup } from '@nizivo/react/radio-group';

export function RadioGroupHorizontalExample(): JSX.Element {
  return (
    <RadioGroup
      legend="Weight unit"
      description="Used on packing slips."
      name="unit"
      defaultValue="kg"
      orientation="horizontal"
    >
      <Radio value="kg">Kilograms</Radio>
      <Radio value="lb">Pounds</Radio>
    </RadioGroup>
  );
}

import type { JSX } from 'react';
import { Radio, RadioGroup } from '@nizivo/react/radio-group';

export function RadioGroupErrorExample(): JSX.Element {
  return (
    <RadioGroup legend="Tax category" name="tax" required error="Choose a tax category.">
      <Radio value="standard">Standard rate</Radio>
      <Radio value="reduced">Reduced rate</Radio>
      <Radio value="exempt">Exempt</Radio>
    </RadioGroup>
  );
}

import type { JSX } from 'react';
import { Radio, RadioGroup } from '@nizivo/react/radio-group';

export function RadioGroupDisabledExample(): JSX.Element {
  return (
    <RadioGroup legend="Fulfilment" name="fulfilment" defaultValue="manual" disabled>
      <Radio value="manual">Manual</Radio>
      <Radio value="automatic">Automatic</Radio>
    </RadioGroup>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

RadioGroupChangeReason type

import type { RadioGroupChangeReason } from '@nizivo/react/radio-group'

Every change comes from the native change event of the radio that became checked.

type RadioGroupChangeReason = "input"

RadioGroupProps type

import type { RadioGroupProps } from '@nizivo/react/radio-group'

The props of RadioGroup, listed above.

RadioProps type

import type { RadioProps } from '@nizivo/react/radio-group'

The props of Radio, listed above.

RadioState type

import type { RadioState } from '@nizivo/react/radio-group'

What a render function receives for the root <label>.

The render state of Radio, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-fieldset-content, .nz-fieldset-description, .nz-fieldset-error, .nz-radio, .nz-radio-group, .nz-radio-input, .nz-radio-label.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• radio-input: draws the focus outline itself on keyboard focus.

In forced-colours mode these states keep a visible system colour: radio-input (border), radio-input:checked (fill).

Pattern: WAI-ARIA Authoring Practices.

KeyboardCopy Anchor Link

Source: native <input type="radio"> elements sharing one name (radio-group.client.tsx), which add no key handling; the browser lane (test/browser/toggles.spec.tsx) checks ArrowDown.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: Figma node 7275:11479
• Ghost masters: none