---
name: "RadioGroup"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "RadioGroup - Radio button group"
---

## RadioGroup

> [VERSION] @ray-js/ray >= 0.5.10

### Description

A single-select group composed of multiple Radio components. Use either options or children.

### Props

| Property | Type | Required | Default | Deprecated | Description |
| --- | --- | --- | --- | --- | --- |
| `options` | `RadioGroupOption[]` | No | - | - | Option list; use either this or children. |
| `children` | `any \| any[] \| string` | No | - | - | Child nodes, typically multiple Radio components; use either this or options. |
| `name` | `string` | No | - | - | Form field name, used as the key on form submit |
| `disabled` | `boolean` | No | `false` | - | Whether disabled |
| `onChange` | `(event: RadioGroupChangeEvent) => void` | No | - | - | Triggered when the selection changes. |
| `id` | `string` | No | - | - | id |
| `className` | `string` | No | - | - | className |
| `style` | `any` | No | - | - | style |
| `onClick` | `(子: TouchEvent) => any` | No | - | - | onClick |
| `onTouchStart` | `(n: TouchEvent) => any` | No | - | - | onTouchStart |
| `onTouchMove` | `(o: TouchEvent) => any` | No | - | - | onTouchMove |
| `onTouchCancel` | `(=: TouchEvent) => any` | No | - | - | onTouchCancel |
| `onTouchEnd` | `(a: TouchEvent) => any` | No | - | - | onTouchEnd |
| `onLongPress` | `(a: TouchEvent) => any` | No | - | - | onLongPress event callback, no longer trigger click event |
| `slot` | `string` | No | - | 是: This property is only used in base Mini Program components and is not recommended in the React DSL. | Mini program component slot identifier |
| `onLongClick` | `(n: TouchEvent) => any` | No | - | - | Long press the trigger |

### Referenced Types

##### `type` RadioGroupOption

RadioGroup option data. Inherits all properties of `RadioProps` (e.g., `value`, `checked`, `disabled`, `color`, etc.), and additionally requires `label` as the display text.

| Property | Type | Description |
| --- | --- | --- |
| `label` | `string` | Option label text. |

##### `interface` RadioGroupChangeEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `"change"` | Event type |
| `detail` | `RadioGroupChangeDetail` | Event data |

##### `interface` TouchEvent

| Property | Type | Description |
| --- | --- | --- |
| `touches` | `T[]` | Touch event: array of touch points currently on the screen |
| `changedTouches` | `T[]` | Touch event: array of changed touch points |

##### `interface` RadioProps

| Property | Type | Description |
| --- | --- | --- |
| `value` | `string` | Radio identifier; when this radio is selected, the radio-group change event carries its value |
| `checked` | `boolean` | Whether it is currently selected; can be used as the default selection |
| `disabled` | `boolean` | Whether disabled |
| `color` | `string` | Radio color, same as the CSS color property |

##### `interface` RadioGroupChangeDetail

| Property | Type | Description |
| --- | --- | --- |
| `value` | `string` | Selected value. |

##### `interface` BaseEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `string` | Event type |
| `timeStamp` | `number` | Time in milliseconds since the page opened |
| `target` | `Target` | Source component of the event |
| `currentTarget` | `Target` | Collection of property values for the current component |
| `mark` | `any` | Event mark data |

##### `interface` Target

| Property | Type | Description |
| --- | --- | --- |
| `id` | `string` | id of the event source component |
| `dataset` | `Record<string, unknown>` | Collection of custom attributes from the `dataset` on the event source component |


### Examples

#### Basic usage

```tsx
import React from 'react';
import { RadioGroup, Radio, Label } from '@ray-js/ray';

export default function () {
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Pear', value: 'Pear' },
  ];

  return (
    <RadioGroup onChange={(e) => console.log('Selected value:', e.detail.value)}>
      {options.map((item) => (
        <Label key={item.value}>
          <Radio value={item.value} />
          {item.label}
        </Label>
      ))}
    </RadioGroup>
  );
}
```

#### Driven by options data.

```tsx
import React from 'react';
import { RadioGroup, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Text style={{ marginBottom: '10px' }}>Render with options:</Text>
      <RadioGroup
        name="fruit"
        disabled={false}
        options={[
          { label: 'Apple', value: 'apple', checked: true },
          { label: 'Banana', value: 'banana' },
          { label: 'Grape', value: 'grape', disabled: true },
        ]}
        onChange={(e) => console.log('Selected:', e.detail.value)}
      />
    </View>
  );
}
```