Radio

Requires:

@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

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

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

Different states

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>
  );
}