Checkbox

A basic Checkbox component that should render nicely on any platform. Supports a good level of customization.

You can customization CheckBox component with the Props

Usage#

import React, { FC, useState } from 'react';
import {Body,CheckBox} from 'qdmrncomponents';

const App: FC = () => {

  const DATA = [
    {
        id:'1',
        name:'Cricket',
        value:'cricket'
    },
    { 
        id:'2',
        name:"FootBall",
        value:'football'
    },
    {
        id:'3', 
        name:'BatMinton',
        value:'batminton'
    },
];

const [selectedValue, setSelectedValue] = useState([]);

  return (
    <Body paddingAll={20} V_Aligin_center>
        <CheckBox
          data={DATA}
          selectedValue={selectedValue}
          onChangeValue={setSelectedValue}
        />
    </Body>
  );
};

Reference#

Props#

data#

data props of the checkbox used to list the data and its type Array of object>

selectedValue#

selectedValue props is used to checked the checkbox and its type Array of object

onChangeValue#

onChangeValue props is used to change the selected value of the checkbox and its type Function

import React, { FC, useState } from 'react';
import {Body,CheckBox} from 'qdmrncomponents';

const App: FC = () => {

  const DATA = [
    {
        id:'1',
        name:'Cricket',
        value:'cricket'
    },
    { 
        id:'2',
        name:"FootBall",
        value:'football'
    },
    {
        id:'3', 
        name:'BatMinton',
        value:'batminton'
    },
];

const [selectedValue, setSelectedValue] = useState([]);

  return (
    <Body paddingAll={20} V_Aligin_center>
        <CheckBox
          data={DATA}
          selectedValue={selectedValue}
          onChangeValue={setSelectedValue}
        />
    </Body>
  );
};

checkboxBackgroundColor#

props for changing background color of the checkbox and type string

import React, { FC, useState } from 'react';
import {Body,CheckBox} from 'qdmrncomponents';

const App: FC = () => {

  const DATA = [
    {
        id:'1',
        name:'Cricket',
        value:'cricket'
    },
    { 
        id:'2',
        name:"FootBall",
        value:'football'
    },
    {
        id:'3', 
        name:'BatMinton',
        value:'batminton'
    },
];

const [selectedValue, setSelectedValue] = useState([]);

  return (
    <Body paddingAll={20} V_Aligin_center>
        <CheckBox
          data={DATA}
          selectedValue={selectedValue}
          onChangeValue={setSelectedValue}
          checkboxBackgroundColor="red"
        />
    </Body>
  );
};

checkboxBorderColor#

props for changing border color of the checkbox and type string

checkboxTickIconColor#

props for changing tick icon color of the checkbox and type string

size#

props for changing the size of the checkbox and type number

checkboxTickIconSize#

props for changing tick icon size of the checkbox and type number

labelSize#

props for changing font size of the label and type number

labelColor#

props for changing font color of the label and type string

labelFontWeight#

props for changing font weight of the label and type string-'bold'

inlineStyle#

props give addition props to the Button element type Object