7.0.0 • Published 6 years ago
cf-component-radio v7.0.0
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;
7.0.0
6 years ago
6.1.6
6 years ago
6.1.5
6 years ago
6.1.4
6 years ago
6.1.3
6 years ago
6.1.2
6 years ago
6.1.1
6 years ago
6.1.0
6 years ago
6.0.10
6 years ago
6.0.9
6 years ago
6.0.8
6 years ago
6.0.7
6 years ago
6.0.6
6 years ago
6.0.5
6 years ago
6.0.4
6 years ago
6.0.3
6 years ago
6.0.2
6 years ago
6.0.1
6 years ago
6.0.0
6 years ago
5.0.11
6 years ago
5.0.10
6 years ago
5.0.9
7 years ago
5.0.8
7 years ago
5.0.7
7 years ago
5.0.6
7 years ago
5.0.5
7 years ago
5.0.4
7 years ago
5.0.3
7 years ago
5.0.2
7 years ago
5.0.1
7 years ago
5.0.0
7 years ago
4.0.0
7 years ago
3.0.0
7 years ago
2.2.1
7 years ago
2.2.0
7 years ago
2.1.0
7 years ago
2.0.1
7 years ago
2.0.0
7 years ago
1.0.6
8 years ago
1.0.5
8 years ago
1.0.4
8 years ago
1.0.3
8 years ago
1.0.2
8 years ago
1.0.1
8 years ago
1.0.0
8 years ago