components/halves/Choice.tsx

import type { InputHTMLAttributes, ReactNode } from "react";

type ChoiceProps = {
  children: ReactNode;
  detail?: string;
  type?: "checkbox" | "radio";
} & Omit<InputHTMLAttributes<HTMLInputElement>, "type">;

export function Choice({ children, detail, type = "checkbox", ...props }: ChoiceProps) {
  return (
    <label className="choice">
      <input type={type} {...props} />
      <span className="choice__mark" aria-hidden="true" />
      <span>
        <strong>{children}</strong>
        {detail ? <small>{detail}</small> : null}
      </span>
    </label>
  );
}