# All files / src/components/editable EditableCheckbox.tsx

0% Statements 0/14
100% Branches 1/1
100% Functions 1/1
0% Lines 0/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34

     import type { JSX } from "react";
    import styles from "./EditableField.module.scss";

    /** Props for EditableCheckbox. */
    export interface EditableCheckboxProps {
      /** Whether the checkbox is checked. */
      checked: boolean;
      /** Called when the checkbox value changes. */
      onChange: (checked: boolean) => void;
      /** Label text displayed next to the checkbox. */
      label: string;
      /** Accessible label for the checkbox. */
      ariaLabel?: string;
      /** Test ID for the wrapping label element. */
      "data-testid"?: string;
    }

    /** Simple checkbox toggle — no edit/display mode, always interactive. */
    export function EditableCheckbox(props: EditableCheckboxProps): JSX.Element {
      const { checked, onChange, label, ariaLabel, "data-testid": testId } = props;

      return (
        <label className={styles.worktreeToggle} data-testid={testId}>
          <input
            type="checkbox"
            checked={checked}
            onChange={(e) => onChange(e.target.checked)}
            aria-label={ariaLabel}
          />
          <span>{label}</span>
        </label>
      );
    }