All files / src/components/editable EditableCheckbox.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6x
 
6x
 
 
 
 
1x
 
 
 
 
 
 
 
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>
  );
}