React-radio-checkbox-2z NPM

Description

You can customize icon, theme or color for Checkbox/Radio
Single option
It is not react-radio-checkbox-z

Usage

npm install --save react-radio-checkbox-2z

Import the module in the place you want to use:

import RadioOrCbx from "react-radio-checkbox-2z";

Snippet

    const [value, setValue] = useState('label1') // radio
    // const [value, setValue] = useState(['label1']) // radio || checkbox

    <RadioOrCbx optionLabel='abcd1' optionValue='ab1' value={value} onChange={setValue} />

    <RadioOrCbx optionLabel='abcd2' optionValue='ab2' value={value} onChange={setValue} />

    // Customize label
    <RadioOrCbx optionValue='ds2' value={value} onChange={setValue}>Label</RadioOrCbx>

Props

props	type	description
id	String
theme	String	default: `tick`
className	String	css
disabled	boolean
boxSize	number	default: 16
typeCheckbox	boolean	default: `false` (it is radio)
floatRight	boolean	default: `false` (Check in left)
isRect	boolean	default: `false` (Checkbox is circle)
groupName	String	groupName of radio/checkbox

selectColor	String	default `#4169E1` (color when checked)
unSelectColor	String	default `#cbd1d8` (color when unchecked)
hoverColor	String	default use selectColor (Color when hover)
tabFocusColor	String	default `#000000`. Box shadow color when focus
tickColor	String	Color of tick when check.

checkedIcon		Customize icon. (Change your icon checked)
optionLabel		Display label text
optionValue		Value option (`string` or `number`)
value	Single, Array	Current selected value
onChange	func	Event change
`...props`	any	Prop of input. (It's not necessary)

Note

Theme 'fill', 'in', 'out', 'tick', 'tick-fill', 'tick-fill-in', 'x', 'x-fill', 'x-fill-in'

Example

LIVE EXAMPLE

A working example can be found in the example directory.

npm install

npm run dev
npm run start

License

MIT

react react-component react-radio react-checkbox radio-checkbox checkbox-radio ui-radio ui-checkbox custom-radio custom-checkbox

@delpi/common prop-types styled-components

@everything-registry/sub-chunk-2605

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago