@lightspeed/cirrus-radio

Cirrus Radio Component

Stats

StarsIssuesVersionUpdatedCreatedSize
@lightspeed/cirrus-radio
2.0.0-beta.13 years ago3 years agoMinified + gzip package size for @lightspeed/cirrus-radio in KB

Readme

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;

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.