@lightspeed/cirrus-radio

2.0.0-beta.1 • Public • Published

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;

Readme

Keywords

none

Package Sidebar

Install

npm i @lightspeed/cirrus-radio

Weekly Downloads

0

Version

2.0.0-beta.1

License

MIT

Unpacked Size

32.1 kB

Total Files

13

Last publish

Collaborators

  • kurt.bergeron
  • lightspeedhq
  • ls-guillaume-lambert
  • ls-frederic-bouchard
  • anomen