react-custom-radio-checkbox
v1.0.2
Published
Simple custom radio and checkbox input.
Downloads
24
Maintainers
Readme
Simple React Custom Checkbox and Radio input
Simple custom radio and checkbox input.
Installation
Install react-custom-radio-checkbox
with npm:
$ npm install react-custom-radio-checkbox --save
Quick Start
import React from "react";
import ReactDOM from "react-dom";
import { CustomRadio, CustomCheckbox } from "react-custom-radio-checkbox";
const options = [
{
label: "France",
value: "FR"
},
{
label: "China",
value: "CN"
},
{
label: "New Zealand",
value: "NZ"
},
{
label: "Ukraine",
value: "UA"
}
];
const radioChange = e => {
console.log(e.target.value);
};
const checkboxChange = e => {
console.log(e.target.checked);
};
const App = () => (
<div>
{options.map(option => (
<CustomRadio
key={option.value}
label={option.label}
name="country"
value={option.value}
style={{ display: "block" }}
onChange={radioChange}
/>
))}
<div>
<CustomCheckbox label="Remember Me" onChange={checkboxChange} />
</div>
</div>
);
ReactDOM.render(<App />, document.getElementById("root"));
Demo
Props
| Name | Type | Description |
| ----------- | ---------- | ------------------------------------------ |
| name
| String
| Name of input. |
| label
| String
| Label for input. |
| value
| String
| Value for input. |
| className
| String
| Classname for input. |
| disabled
| boolean
| Disabled the input. |
| style
| Function
| Inline style for the input. |
| onChange
| Function
| The method to call when a page is clicked. |