@neo4j-ndl/react/skills/ndl-react/components/radio.md

React implementation of Neo4j Design System

# Radio

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

## Props

### Radio

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `ariaLabel` | `string` |  |  | The aria label of the radio. Required if the label is not a string. |
| `hasLeadingLabel` | `boolean` |  |  | Whether the label should be displayed before the radio |
| `isChecked` | `boolean` |  |  | Whether the radio is checked |
| `isDefaultChecked` | `boolean` |  |  | Selects the radio by default in uncontrolled mode |
| `isDisabled` | `boolean` |  | `false` | Whether the radio is disabled |
| `isFluid` | `boolean` |  | `false` | Whether the radio & label should take the full available width of its container |
| `label` | `ReactNode` |  |  | The label of the radio. If not a string, supply an aria label for screen reader support. |
| `onChange` | `((event: ChangeEvent<HTMLInputElement, Element>) => void)` |  |  | The callback function triggered when the radio value changes |
| `onClick` | `((event: MouseEvent<HTMLInputElement, MouseEvent>) => void)` |  |  | The callback function triggered when the radio is clicked |
| `ref` | `Ref<HTMLInputElement>` |  |  | A ref to apply to the root element. |
| `value` | `string \| number \| readonly string[]` |  |  | The value of the radio |

## Accessibility

## Implementation guidelines

The Radio component uses implicit label wrapping to associate the visible label with the input for screen readers. If you omit the label prop or use an invalid label (no text content), the `ariaLabel` prop will be required to ensure an accessible name.

## Examples

### Default

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

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

const Component = () => {
  return <Radio label="Radio label" />;
};

export default Component;
```

### Controlled

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

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

const Component = () => {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <Radio
      label="Controlled radio"
      isChecked={isChecked}
      onChange={(event) => setIsChecked(event.target.checked)}
    />
  );
};

export default Component;
```

### Custom Label

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

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

const Component = () => {
  return (
    <Radio
      label={<Typography variant="label">Custom label</Typography>}
      ariaLabel="example aria label"
    />
  );
};

export default Component;
```

### Disabled

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

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

const Component = () => {
  return (
    <div className="n-flex n-flex-col n-gap-token-12">
      <Radio label="Radio label" isDisabled />
      <Radio label="Radio label" isDisabled isChecked />
    </div>
  );
};

export default Component;
```

### Has Label Before

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

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

const Component = () => {
  return <Radio label="Radio label" hasLeadingLabel />;
};

export default Component;
```

### No Label

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

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

const Component = () => {
  return <Radio ariaLabel="Radio without label" />;
};

export default Component;
```

### Truncated Label

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

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

const Component = () => {
  return (
    <div className="n-max-w-32">
      <Radio label="This is a long label that will overflow" />
    </div>
  );
};

export default Component;
```