Radio

A small wrapper around the radio component to give it the cirrus styling.

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-radio

Or using npm:

npm i -S @lightspeed/cirrus-radio

React Component

Props

| Prop | Type | Default | Description | | --------------- | --------- | --------- | -------------------------------------------------------------- | | label | string | undefined | Radio's label | | description | string | undefined | Description's text | | html property | string | undefined | Any extra properties passed will be added to the <Radio> tag |

Example

Simple stateless radio input

By default, the radio input is stateless.

import React from 'react';
import Radio from '@lightspeed/cirrus-radio';

const MyComponent = () => (
  <div>
    <Radio name="feature" value="a"/>
    <Radio name="feature" value="b"/>
  </div>
);

export default MyComponent;

Making a controlled radio input

If we need to control or set the checked property in any matter, we need to create a controlled version of the radio input.

import React from 'react';
import Radio from '@lightspeed/cirrus-radio';

class StatefulRadio extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      radioAChecked: false,
      radioBChecked: false,
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    if (event.target.value === 'a') {
      this.setState({ radioAChecked: true, radioBChecked: false, });
    } else if (event.target.value === 'b') {
      this.setState({ radioAChecked: false, radioBChecked: true, });
    }
  }

  render() {
    const { checked } = this.state;
    return (
      <div>
        <Radio name="feature" checked={radioAChecked} onChange={this.handleChange} value="a" />
        <Radio name="feature" checked={radioBChecked} onChange={this.handleChange} value="b" />
      </div>
    );
  }
}

export default StatefulSwitch;