Checkbox

A customizable React checkbox component that supports controlled state, disabled state, and optional labeling.
<Checkbox
  isChecked?: boolean
  isDisabled?: boolean
  handleCheck?: (checked: boolean | "indeterminate") => void
  label?: string
> : JSX.Element
Parameters
  • isChecked: Controls whether the checkbox is checked. Defaults to false.
  • isDisabled: Disables the checkbox when true.
  • handleCheck: Callback triggered when the checkbox state changes. Receives the new state as a parameter.
  • label: Optional text label displayed next to the checkbox.

Example

import { Checkbox } from "@explita/daily-toolset/form";

function App() {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheck = (checked) => {
    setIsChecked(checked === true);
  };

  return (
    <div>
      <Checkbox
        isChecked={isChecked}
        handleCheck={handleCheck}
        label="Accept Terms and Conditions"
      />
    </div>
  );
}

Use Cases

  • Creating controlled checkboxes with custom behavior.
  • Adding labels for accessibility and better UI clarity.
  • Disabling checkboxes based on form or application state.