⬅️ Back to Table of Contents

📄 Checkbox

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	2
💠 JSX Elements	1
📐 Interfaces	1

📚 Table of Contents

• Imports
• JSX Elements
• Functions
• Interfaces

🛠️ File Location:

📂 packages/website/src/components/inputs/Checkbox.tsx

📦 Imports

Name	Source
useCallback	react
React	react

---

JSX Elements

Component	Type	Props	Children
input	element	checked={props.checked && !props.indeterminate}, className={props.className},...	none

---

Functions

Checkbox(props: CheckboxProps): React.JSX.Element

Parameters:

• props CheckboxProps

Returns: React.JSX.Element

Calls:

• useCallback (from react)
• props.onChange

Code

function Checkbox(props: CheckboxProps): React.JSX.Element {
  const { indeterminate } = props;

  const checkboxRef = useCallback(
    (node: HTMLInputElement | null) => {
      if (!node) {
        return;
      }

      node.indeterminate = indeterminate ?? false;
    },
    [indeterminate],
  );

  return (
    <input
      checked={props.checked && !props.indeterminate}
      className={props.className}
      name={props.name}
      onChange={(e): void =>
        props.onChange(e.target.checked, props.value ?? '')
      }
      ref={checkboxRef}
      type="checkbox"
    />
  );
}

---

Interfaces

CheckboxProps

Interface Code

export interface CheckboxProps {
  readonly checked: boolean | undefined;
  readonly className?: string;
  readonly indeterminate?: boolean;
  readonly name: string;
  readonly onChange: (checked: boolean, value: string) => void;
  readonly value?: string;
}

Properties

Name	Type	Optional	Description
checked	boolean \| undefined	✗	not shown
className	string	✓	not shown
indeterminate	boolean	✓	not shown
name	string	✗	not shown
onChange	(checked: boolean, value: string) => void	✗	not shown
value	string	✓	not shown

---

Generated by Syntax Scribe