Checkbox

import { CheckboxGroup, type CheckboxOption } from "@bosunkit/components/checkbox";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const title: string = "Choose the sections of a report";
const options: readonly CheckboxOption[] = [
  {value:"summary",label:"Executive summary",description:"Decisions, outcomes and next priorities."},
  {value:"changes",label:"Engineering changes",description:"Implementation details and supporting evidence."},
  {value:"attachments",label:"Attachments",description:"Supporting documents supplied with the report."},
  {value:"classification",label:"Classification notice",description:"Included in every report.",disabled:true},
];
export default function Example(): ReactElement {
  const [value,setValue]: [readonly string[], Dispatch<SetStateAction<readonly string[]>>] = useState<readonly string[]>(["summary","classification"]);
  return <div>
    <CheckboxGroup label="Report sections" hint="Choose the content for this illustrative export." options={options}
      value={value} onValueChange={setValue} selectAllLabel="Select all optional sections" />
    <p role="status">Included: {options.filter((option: CheckboxOption): boolean => value.includes(option.value)).map((option: CheckboxOption): string => option.label).join(", ")}</p>
  </div>;
}

import { Checkbox } from "@bosunkit/components/checkbox";
import type { ReactElement } from "react";
export const title: string = "Unchecked, checked, mixed, read-only and disabled";
export default function Example(): ReactElement {
  return <div>
    <Checkbox label="Include source notes" />
    <Checkbox label="Include figures" defaultChecked />
    <Checkbox label="Some sections selected" indeterminate readOnly hint="The mixed mark describes a partial selection." />
    <Checkbox label="Recorded preference" checked readOnly hint="This value can be read but cannot be changed here." />
    <Checkbox label="Attachment unavailable" disabled hint="Add a supporting document before including it." />
  </div>;
}

import { Checkbox } from "@bosunkit/components/checkbox";
import { Button } from "@bosunkit/components/button";
import { useState, type Dispatch, type SubmitEvent, type ReactElement, type SetStateAction } from "react";
export const title: string = "Validation retains the draft";
export default function Example(): ReactElement {
  const [checked,setChecked]: [boolean,Dispatch<SetStateAction<boolean>>] = useState(false);
  const [attempted,setAttempted]: [boolean,Dispatch<SetStateAction<boolean>>] = useState(false);
  const [result,setResult]: [string,Dispatch<SetStateAction<string>>] = useState("");
  function submit(event: SubmitEvent<HTMLFormElement>): void {
    event.preventDefault(); setAttempted(true); setResult(checked ? "Example review confirmed." : "");
  }
  return <form onSubmit={submit} noValidate>
    <Checkbox label="I reviewed the draft" name="reviewed" required checked={checked}
      onCheckedChange={(next: boolean): void => {setChecked(next);setResult("");}}
      error={attempted && !checked ? "Review the draft and select the checkbox to continue." : undefined} />
    <Button type="submit">Confirm review</Button>
    <p role="status">{result}</p>
  </form>;
}