@dinefy/react-radio

Dinefy React Web UI - radio component

Installation

npm install @dinefy/react-radio

import { Radio } from "@dinefy/react-radio";

function App() {
  const frameworks = ["React", "Vue", "Svelte", "Angular"];

  return (
    <Radio.Root defaultValue="React">
      <Radio.Label>Select your framework</Radio.Label>
      <Radio.Indicator />
      {frameworks.map((framework) => (
        <Radio.Item key={framework} value={framework}>
          <Radio.ItemControl>
            <Radio.Indicator />
          </Radio.ItemControl>
          <Radio.ItemText>{framework}</Radio.ItemText>
          <Radio.ItemHiddenInput />
        </Radio.Item>
      ))}
    </Radio.Root>
  );
}

## API Reference

### Radio.Root

The root component of the radio group.

#### Props

- **size**: `"sm" | "md" | "lg"` - Size variant (default: `"md"`)
- All other props from `@ark-ui/react/radio-group`

### Radio.Item

Individual radio item container.

### Radio.ItemControl

Visual control element for the radio button.

### Radio.ItemText

Text label for the radio item.

### Radio.ItemHiddenInput

Hidden native input element.

### Radio.Label

Label for the entire radio group.

### Radio.Indicator

Visual indicator (dot) inside the radio control.