Checkbox

General

Checkbox
Used for selecting multiple values from several options.

Label

Show Code

import React from "react";
import Checkbox from "pocko-ui/Checkbox";
 
return (
  <div className="mt-4">
      <Checkbox
        id="demo1"
        name="demo1name"
        value="123"
        label="Label"
        onChange={(arg1: any, arg2: any) => {
            console.log(arg1, arg2);
        }}
      />
 
      <Checkbox
        id="demo1.1"
        name="demo1.1name"
        value="123"
        label="Label"
        onChange={(arg1: any, arg2: any) => {
            console.log(arg1, arg2);
        }}
        checked
      />
 
      <Checkbox
        id="demo1.2"
        name="demo1.2name"
        value="123"
        label="Label"
        onChange={(arg1: any, arg2: any) => {
            console.log(arg1, arg2);
        }}
        disabled
      />
  </div>
);

No spacing

Label

Show Code

import React from "react";
import Checkbox from "pocko-ui/Checkbox";
 
return (
  <div className="mt-4">
      <Checkbox
        id="demo1"
        name="demo1name"
        value="123"
        label="Label"
        onChange={(arg1: any, arg2: any) => {
            console.log(arg1, arg2);
        }}
        wrapperClassName="m-0"
      />
 
      <Checkbox
        id="demo1.1"
        name="demo1.1name"
        value="123"
        label="Label"
        onChange={(arg1: any, arg2: any) => {
            console.log(arg1, arg2);
        }}
        wrapperClassName="m-0"
        checked
      />
  </div>
);

Using contentRef to Control the Checkbox Component

Control Checkbox Externally

Show Code

import React from "react";
import Checkbox from "pocko-ui/Checkbox";
 
const checkboxRef = useRef<any>(null);
 
// Function to set the checkbox to checked
const handleSetCheckbox = () => {
  checkboxRef.current.set(true); // Set checkbox to checked
};
 
// Function to clear the checkbox (set it to unchecked)
const handleClearCheckbox = () => {
  checkboxRef.current.clear(); // Clear checkbox (set it to unchecked)
};
 
return (
  <div className="mt-4">
      <Checkbox
        contentRef={checkboxRef} // useRef
        value="checkbox1"
        label="Control Checkbox Externally"
      />
 
      <button
        type="button"
        className="btn btn-sm btn-warning me-2"
        onClick={handleSetCheckbox}
      >
        Check Checkbox
      </button>
 
      <button
        type="button"
        className="btn btn-sm btn-danger text-dark"
        onClick={handleClearCheckbox}
      >
        Uncheck Checkbox
      </button>
  </div>
  );

API

Checkbox

import Checkbox from "pocko-ui/Checkbox";

Property	Type	Default	Description	Required
`contentRef`	React.ForwardedRef	-	Allows external components to operate on the component instance through a ref (e.g., clearing or setting values).	-
`wrapperClassName`	string	-	Custom class name for the control wrapper.	-
`formCheckClassName`	string	-	Custom class name for the form check box.	-
`controlClassName`	string	-	Custom class name for the checkbox itself.	-
`itemSelectedClassName`	string	-	Custom class name for the selected item.	-
`value`	string \| boolean	-	The value of the control. Can be a string or boolean.	✔
`label`	React.ReactNode \| string	-	The label content on the left of the checkbox. It can be a string or React node.	-
`id`	string \| number \| any	-	The `id` of the control, used to associate the `label` and `input` elements.	-
`name`	string \| any	-	The `name` attribute of the control.	-
`checked`	boolean	-	Controls whether the checkbox is checked or not.	-
`disabled`	boolean	`false`	Disables the checkbox. If set to `true`, the checkbox cannot be clicked.	-
`style`	React.CSSProperties	-	Custom styles for the checkbox.	-
`onChange`	(arg_1: any, arg_2: any) => void	-	Callback function triggered when the checkbox state changes. It returns the checked state and current value.	-

Installation