[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)

# RadioGroup

Import: `import { RadioGroup } from '@neo4j-ndl/react'`

## Props

### RadioGroup

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | ✅ |  | The controls grouped by the fieldset |
| `errorText` | `ReactNode` |  |  | Error message displayed below the grouped controls. When provided, it replaces `helpText` |
| `hasRequiredIndicator` | `boolean` |  |  | Whether Required or Optional is shown at the end of the legend row |
| `hasVisuallyHiddenLabel` | `boolean` |  |  | Whether the legend is clipped out of the layout, leaving it to screen readers only |
| `helpText` | `ReactNode` |  |  | Assistive text displayed below the grouped controls |
| `isDisabled` | `boolean` |  | `false` | Whether all native form controls in the fieldset are disabled |
| `isRequired` | `boolean` |  | `false` | Whether the grouped field is required |
| `label` | `ReactNode` | ✅ |  | The accessible label displayed in the fieldset legend |
| `name` | `string` | ✅ |  | Shared native name for the radios in the group |
| `onChange` | `((value: string, event: ChangeEvent<HTMLInputElement, Element>) => void)` |  |  | Called with the newly selected radio's value when the selection changes |
| `orientation` | `'horizontal' \| 'vertical'` |  | `vertical` | Whether the radios are stacked vertically or laid out in a wrapping row |
| `ref` | `Ref<HTMLFieldSetElement>` |  |  | A ref to apply to the root element. |
| `value` | `string \| null` |  |  | The value of the selected radio. Pass `null` when no radio is selected. Leave undefined for uncontrolled usage |

Pass `value` and `onChange` to control the selection from the group; each
`Radio` is then checked when its `value` matches the group's `value`, and
its own `isChecked` is ignored. Without `value`, selection state remains on
each `Radio` (for example via `isDefaultChecked`), and `onChange` can still
be used to observe changes. Radios inherit `name`, disabled, required,
help, and validation semantics from the group.

## Accessibility

`RadioGroup` renders a native `<fieldset>` and `<legend>` with
`role="radiogroup"`. The legend names the group, while every `Radio` keeps its
own label. The required shared `name` is inherited by the radios so browsers
treat them as one native choice.

Native radios provide the keyboard behavior: Tab enters or leaves the group,
arrow keys move and select within a same-name group, and Space selects the
focused radio. No custom roving focus is added. Both up/down and left/right
arrows work regardless of `orientation`, so the horizontal layout needs no
extra keyboard handling.

When `isRequired` is set, the group has `aria-required="true"` and its radios
inherit native `required`. `isDisabled` disables the fieldset and every
descendant control.

Help and error text are associated with the radiogroup through
`aria-describedby`; individual radios retain only descriptions supplied
directly to them. An error replaces help text and sets `aria-invalid` on the
radiogroup.

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Radio, RadioGroup } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <RadioGroup
      label="Default project size"
      name="project-size"
      helpText="Choose the size used for new projects."
    >
      <Radio label="Small" value="small" />
      <Radio label="Medium" value="medium" isDefaultChecked />
      <Radio label="Large" value="large" />
    </RadioGroup>
  );
};

export default Component;
```

### Controlled

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Radio, RadioGroup, Typography } from '@neo4j-ndl/react';
import { useState } from 'react';

const Component = () => {
  const [projectSize, setProjectSize] = useState('medium');

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <RadioGroup
        label="Default project size"
        name="project-size"
        value={projectSize}
        onChange={setProjectSize}
      >
        <Radio label="Small" value="small" />
        <Radio label="Medium" value="medium" />
        <Radio label="Large" value="large" />
      </RadioGroup>
      <Typography variant="body-medium">Selected: {projectSize}</Typography>
    </div>
  );
};

export default Component;
```

### Disabled

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Radio, RadioGroup } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <RadioGroup
      label="Default project size"
      name="project-size-disabled"
      isDisabled
    >
      <Radio label="Small" value="small" />
      <Radio label="Medium" value="medium" isDefaultChecked />
      <Radio label="Large" value="large" />
    </RadioGroup>
  );
};

export default Component;
```

### Error

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Radio, RadioGroup } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <RadioGroup
      label="Default project size"
      name="project-size-error"
      errorText="Select a project size."
    >
      <Radio label="Small" value="small" />
      <Radio label="Medium" value="medium" isDefaultChecked />
      <Radio label="Large" value="large" />
    </RadioGroup>
  );
};

export default Component;
```

### Horizontal

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Radio, RadioGroup } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <RadioGroup
      label="Default project size"
      name="project-size"
      helpText="Choose the size used for new projects."
      orientation="horizontal"
    >
      <Radio label="Small" value="small" />
      <Radio label="Medium" value="medium" isDefaultChecked />
      <Radio label="Large" value="large" />
    </RadioGroup>
  );
};

export default Component;
```

### Optional

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Radio, RadioGroup } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <RadioGroup
      label="Default project size"
      name="project-size-optional"
      hasRequiredIndicator
    >
      <Radio label="Small" value="small" />
      <Radio label="Medium" value="medium" isDefaultChecked />
      <Radio label="Large" value="large" />
    </RadioGroup>
  );
};

export default Component;
```

### Required

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Radio, RadioGroup } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <RadioGroup
      label="Default project size"
      name="project-size-required"
      hasRequiredIndicator
      isRequired
    >
      <Radio label="Small" value="small" />
      <Radio label="Medium" value="medium" isDefaultChecked />
      <Radio label="Large" value="large" />
    </RadioGroup>
  );
};

export default Component;
```

### Visually Hidden Label

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Radio, RadioGroup } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <>
      <RadioGroup
        label="Default project size"
        name="project-size-hidden"
        hasVisuallyHiddenLabel
      >
        <Radio label="Small" value="small" />
        <Radio label="Medium" value="medium" isDefaultChecked />
        <Radio label="Large" value="large" />
      </RadioGroup>
    </>
  );
};

export default Component;
```