CheckboxField

CheckboxField renders a boolean toggle displayed as a large icon-based checkbox. Clicking anywhere in the body area (or pressing Enter/Space) toggles the value. Custom icon paths can be supplied for both the checked and unchecked states.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | boolean | Yes | — | Current checked state. | | onChange | (checked: boolean) => void | Yes | — | Called with the new boolean value when toggled. | | label | string | No | — | Text label rendered next to the checkbox icon. | | description | string | No | — | Helper text rendered below the label. | | iconSize | number | No | 34 | Size in pixels of the checkbox icon. | | iconColor | string | No | 'primary' | Color applied to the icon. Accepts a theme color name or any CSS color. | | checkedIconPaths | { d: string; color?: string }[] | No | — | Custom SVG paths for the checked state icon. | | uncheckedIconPaths | { d: string; color?: string }[] | No | — | Custom SVG paths for the unchecked state icon. | | containerStyle | React.CSSProperties | No | — | Styles applied to the root container. | | headerStyle | React.CSSProperties | No | — | Styles applied to the header area. | | bodyStyle | React.CSSProperties | No | — | Styles applied to the clickable body area. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the root container. | | id | string | No | — | id attribute on the root container. |

Usage

Basic

import React, { useState } from 'react';
import CheckboxField from '@/components/fields/CheckboxField';

export default function Example() {
  const [accepted, setAccepted] = useState(false);

  return (
    <CheckboxField
      label="Accept terms and conditions"
      value={accepted}
      onChange={setAccepted}
    />
  );
}

With description and custom icon size

<CheckboxField
  label="Enable notifications"
  description="You will receive email alerts when new events occur."
  value={notifications}
  onChange={setNotifications}
  iconSize={42}
  iconColor="success"
/>