This package has been deprecated

Author message:

This package has been deprecated. Please find this package under its new name @cloudflare/component-radio.

cf-component-radio

7.0.0 • Public • Published

cf-component-radio

Cloudflare Radio Component

Installation

Installation with yarn is recommended

 
$ yarn add cf-component-radio
 

Usage

import React from 'react';
import { Radio, RadioUnstyled, RadioTheme, RadioGroup } from '../../src/index';
import { applyTheme } from 'cf-style-container';
 
const RadioGroupItem = applyTheme(RadioUnstyled, RadioTheme, () => ({
  cursor: 'initial'
}));
 
class RadioComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      radioValue: 'option1'
    };
    this.onRadioChange = this.onRadioChange.bind(this);
  }
 
  onRadioChange(val) {
    this.setState({
      radioValue: val
    });
  }
 
  render() {
    return (
      <div>
        <p>
          You can create them individually with <code>Radio</code>
        </p>
 
        <Radio
          label="Radio 1"
          name="radio-1"
          value="radio1"
          checked={this.state.radioValue === 'radio1'}
          onChange={this.onRadioChange}
        />
 
        <Radio
          label="Radio 2"
          name="radio-2"
          value="radio2"
          checked={this.state.radioValue === 'radio2'}
          onChange={this.onRadioChange}
        />
 
        <p>
          Or as a group with <code>RadioGroup</code>
        </p>
 
        <RadioGroup value={this.state.radioValue} onChange={this.onRadioChange}>
          <RadioGroupItem
            label="Radio 3 (Disabled)"
            name="radio-3"
            value="radio3"
            disabled
          />
          <RadioGroupItem label="Radio 4" name="radio-4" value="radio4" />
        </RadioGroup>
 
        <p>
          You can also disable a label by passing <code>false</code> explicitly
        </p>
 
        <Radio
          label={false}
          name="radio-5-no-label"
          value="radio5"
          checked={this.state.radioValue === 'radio5'}
          onChange={this.onRadioChange}
        />
      </div>
    );
  }
}
 
export default RadioComponent;
 

Readme

Keywords

none

Package Sidebar

Install

npm i cf-component-radio

Weekly Downloads

5

Version

7.0.0

License

BSD-3-Clause

Unpacked Size

29.3 kB

Total Files

13

Last publish

Collaborators

  • lerwincf
  • lbarthonet
  • cf-media-manager
  • jacobbednarz
  • celso
  • cf-radar
  • dash_service_account
  • g4brym
  • snigdha34
  • wrangler-publisher
  • marksteyn
  • chiminator
  • sgoodhew_cf
  • terinjokes
  • third774
  • jsteinberger
  • jasnell
  • asapzacy
  • pcostanzo
  • gregbrimble
  • geelen
  • rexscaria
  • dcruz_cf
  • xuranwang
  • jculvey
  • sejoker
  • vasturiano
  • cf-ci-write
  • segments-write
  • thibmeu
  • xortive
  • gurjinder
  • cf-ci2
  • lvalenta
  • worenga