Function Checkbox

packages/devtools-ui/src/components/checkbox.tsx:11–43

(props: CheckboxProps)

}

export function Checkbox(props: CheckboxProps) {
  const styles = createStyles()
  const [isChecked, setIsChecked] = createSignal(props.checked || false)
  const descriptionId = `${createUniqueId()}-description`

  const handleChange = (e: Event) => {
    const checked = (e.target as HTMLInputElement).checked
    setIsChecked(checked)
    props.onChange?.(checked)
  }

  return (
    <div class={styles().checkboxContainer}>
      <label class={styles().checkboxWrapper}>
        <input
          data-tsd-control
          data-tsd-selected={isChecked() ? 'true' : undefined}
          aria-describedby={props.description ? descriptionId : undefined}
          type="checkbox"
          checked={props.checked ?? isChecked()}
          class={styles().checkbox}
          onInput={handleChange}
        />
        <div class={styles().checkboxLabelContainer}>
          {props.label && (
            <span class={styles().checkboxLabel}>{props.label}</span>
          )}
          {props.description && (
            <span id={descriptionId} class={styles().checkboxDescription}>
              {props.description}
            </span>
          )}
        </div>
      </label>
    </div>
  )