you can use the lib like this for multi-select checkboxs
import { Checkbox, CheckboxGroup } from 'mff-checkbox'
const options = {
onChange,
checkedList,
name,
}
<CheckboxGroup {...options} >
<Checkbox value={'McCartney'} />
<Checkbox value={'Lennon'} />
<Checkbox value={'Harrison'} />
<Checkbox value={'Starr'} />
</CheckboxGroup>
or, you can use like following code for binary-choice checkbox
import { Checkbox } from 'mff-checkbox'
const options = {
onChange,
name,
checked: false // if you don't set this argument, default checked state is false
}
// checked if you love the beatles
<Checkbox
{...options}
value={'fan'}
inGroup={false} // set this to use Checkbox alone
/>
yarn add mff-checkbox
Properties | Type | Default | Required |
---|---|---|---|
name | string | false | |
checkedList | array | [] |
false |
onChange | function | false |
- name: child
input
name - checkedList: default checked input values
- onChange:
onChange(nextCheckedList){
doSomeForCheckedList(checkedList)
}
Properties | Type | Default | Required |
---|---|---|---|
value | string(number, bool) | false | |
inGroup | bool | true |
unnecessary to set |
inGroup
must betrue
when multi-select scenario
- value: input value for identification
Properties | Type | Default | Required |
---|---|---|---|
value | string | false | |
name | string | false | |
checked | bool | false |
false |
onChange | function | false | |
inGroup | bool | true |
must set to make it work for binary-choice |
inGroup
must befalse
when binary-choice scenario
- value: input value for identification
- name: input name for your purpose
- checked: input default checked
- onChange:
onChange(nextChecked){ // nextChecked will be opposite of the input checked before triggering the event
doSomeForChecked(nextChecked)
}
MIT