Skip to content

Instantly share code, notes, and snippets.

@kruyvanna
Forked from vincentaudebert/SegmentedControl.js
Last active June 28, 2017 03:03
Show Gist options
  • Save kruyvanna/bf2c75e325298810ae4e327c0a9fafb3 to your computer and use it in GitHub Desktop.
Save kruyvanna/bf2c75e325298810ae4e327c0a9fafb3 to your computer and use it in GitHub Desktop.
Radio Buttons renderer for redux-form with Bulma css classes applied
import React from 'react';
import PropTypes from 'prop-types';
const SegmentedControl = ({ input, disabled, heading, required, className, items, name, meta: { touched, error } }) => (
<div className="field">
<div className="control">
<div className="help">{heading} {required ? (<span className="help inline is-danger">*</span>) : null}</div>
{ items.map((item, i) => (
<label className="radio m-r-2" key={ i }>
<input
{...input}
name={ name }
type="radio"
value={ item.value }
disabled={ disabled }
checked={ input.value === item.value }
id={ `${name}-${item.value}` }
/>
<span className="m-l-1">{item.label}</span>
</label>
))
}
{ (touched && error) ? (
<span className="help is-danger"> {error}</span>
) : null }
</div>
</div>
);
SegmentedControl.propTypes = {
input: PropTypes.object.isRequired,
className: PropTypes.string,
items: PropTypes.arrayOf(PropTypes.shape({
label: PropTypes.string.isRequired,
value: PropTypes.any.isRequired,
})).isRequired,
heading: PropTypes.string,
meta: PropTypes.object,
required: PropTypes.bool,
disabled: PropTypes.bool,
};
export default SegmentedControl;
import SegmentedControl from 'components/SegmentedControl/';
class Form extends Component {
...
render() {
...
<Field
name="gender"
component={SegmentedControl}
heading="What is your gender?"
items={
[
{
label: 'Female',
value: 'female',
},
{
label: 'Male',
value: 'male',
},
]
}
required={true}
/>
...
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment