Guide
Form Elements
Checkbox

Checkbox Component

Checkbox is a React component designed to create customizable input fields with options such as color, label, and more. It supports different sizes and colors along with disabled and checked states.

Example Preview

Checkbox Example

Usage

import { Checkbox } from "@/@core";
 
// ...
 
const MyComponent = () => {
  return (
    <Fragment>
      <Checkbox defaultChecked color="primary" label="Primary Checkbox" />
      <Checkbox checked color="error" size="lg" label="Large Error Checkbox" />
      <Checkbox disabled label="Disabled Checkbox" />
    </Fragment>
  );
};
 
export default MyComponent;

Props

Prop nameTypeDefault valueRequiredDescription
checkedboolean-NoBoolean indicating whether the checkbox is checked.
defaultCheckedboolean-NoBoolean indicating the default checked state.
colorprimary, secondary, error, success, warning, info, accent-NoString representing the color theme of the checkbox.
labelstring-NoString representing the label text for the checkbox.
disabledboolean-NoBoolean indicating whether the checkbox is disabled.
sizexs, sm, md, lg-NoString representing the size of the checkbox.
classNamestring-NoAdditional class names for styling purposes.
propsHTMLAttributes<HTMLInputElement>-NoAdditional HTML attributes can be passed as well.

Styling

The component provides various styling options based on the color and size props. The label text size and color can be customized accordingly.

Customizing Example

import { Checkbox } from "@/@core";
 
const MyComponent = () => {
  const [checked, setChecked] = useState(false);
 
  return (
    <Fragment>
      <Checkbox
        checked={checked}
        color="primary"
        label="Primary Checkbox"
        className="checked:border-indigo-800 [--chkbg:theme(colors.indigo.600)] [--chkfg:orange]"
        onChange={() => setChecked(!checked)}
      />
      <Checkbox
        defaultChecked
        color="primary"
        label="Primary Checkbox"
        className="[--chkbg:oklch(var(--a))] [--chkfg:oklch(var(--p))]"
      />
    </Fragment>
  );
};
 
export default MyComponent;

All Available Props

import { Checkbox } from '@/@core';
 
// ...
 
const AllAvailableProps = () => {
   return (
      <Fragment>
         <Checkbox
            checked={/* boolean */}
            defaultChecked={/* boolean */}
            color={/* 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'info' | 'accent' */}
            label={/* string */}
            disabled={/* boolean */}
            size={/* 'xs' | 'sm' | 'md' | 'lg' */}
            className={/* string */}
            /* Other HTML attributes for the input element */
          />
      </Fragment>
   );
};
 
export default AllAvailableProps;
ℹ️

Note: The Checkbox component is inspired by the DaisyUI (opens in a new tab) framework. Check it out for more awesome components. But our Checkbox component is dynamic and easy to use. It is also fully customizable.

TypographyFile Input