Radio

Displays a radio button. Adopted from react-radio-group.

Controlled

Example

<div id="container"></div>

import {render} from 'react-dom';
import React, {Fragment} from 'react';
import {withState} from 'recompose';

import Radio from '@jetbrains/ring-ui/components/radio/radio';

const container = document.getElementById('container');
const RadioExample = withState('value', 'onChange', 'one')(props => (
  <Fragment>
    Selected: {props.value}
    <Radio {...props}>
      <Radio.Item value="one">One</Radio.Item>
      <Radio.Item value="two">Two</Radio.Item>
      <Radio.Item value="three">Three</Radio.Item>
    </Radio>
  </Fragment>
));
render(<RadioExample/>, container);

Uncontrolled

Example

<div id="container"></div>

import {render} from 'react-dom';
import React, {Fragment} from 'react';

import Radio from '@jetbrains/ring-ui/components/radio/radio';

const container = document.getElementById('container');
const RadioExample = () => (
  <Radio>
    <Radio.Item value="one" defaultChecked>One</Radio.Item>
    <Radio.Item value="two">Two</Radio.Item>
    <Radio.Item value="three">Three</Radio.Item>
  </Radio>
);
render(<RadioExample/>, container);

Disabled

Example

<div id="container"></div>

import {render} from 'react-dom';
import React, {Fragment} from 'react';

import Radio from '@jetbrains/ring-ui/components/radio/radio';
import RadioItem from '@jetbrains/ring-ui/components/radio/radio__item';

const container = document.getElementById('container');
const RadioExample = () => (
  <Radio disabled>
    <Radio.Item value="one" defaultChecked>One</Radio.Item>
    <Radio.Item value="two">Two</Radio.Item>
    <Radio.Item value="three">Three</Radio.Item>
  </Radio>
);
render(<RadioExample/>, container);