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

## Radio

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

### Description

Radio for selecting one option from a mutually exclusive group.

### Props

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

### Examples

#### Basic usage

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

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Radio checked />
    </View>
  );
}
```

#### Different states

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

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '10px' }}>
        <Text>Default state:</Text>
        <Radio />
      </View>
      <View style={{ marginBottom: '10px' }}>
        <Text>Checked state:</Text>
        <Radio checked />
      </View>
      <View style={{ marginBottom: '10px' }}>
        <Text>Disabled state:</Text>
        <Radio disabled />
      </View>
      <View style={{ marginBottom: '10px' }}>
        <Text>Custom color:</Text>
        <Radio color="#ff0000" checked />
      </View>
    </View>
  );
}
```