Radio group

import { RadioGroup } from "@bosunkit/components/radio-group";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
export const title: string = "Choose one report format";
export default function Example(): ReactElement {
  const [value,setValue]: [string,Dispatch<SetStateAction<string>>] = useState("summary");
  return <div><RadioGroup label="Report format" hint="Choose how much detail the reader needs." value={value} onValueChange={setValue}
    options={[
      {value:"summary",label:"Executive summary",description:"Decisions, outcomes and next priorities."},
      {value:"technical",label:"Technical report",description:"Architecture, implementation and verification evidence."},
      {value:"slides",label:"Presentation",description:"A narrative for a live discussion."},
      {value:"email",label:"Investor email",description:"Available after the recipient list is configured.",disabled:true},
    ]} /><p role="status">{value === "summary" ? "Summary format selected." : value === "technical" ? "Technical format selected." : "Presentation format selected."}</p></div>;
}

import { RadioGroup } from "@bosunkit/components/radio-group";
import type { ReactElement } from "react";
export const title: string = "Horizontal, read-only and invalid choices";
export default function Example(): ReactElement {
  const options: readonly {value:string;label:string}[] = [{value:"comfortable",label:"Comfortable"},{value:"compact",label:"Compact"}];
  return <div style={{display:"grid",gap:"var(--space-xl)"}}>
    <RadioGroup label="Layout density" options={options} orientation="horizontal" defaultValue="comfortable" />
    <RadioGroup label="Recorded density" options={options} value="compact" readOnly hint="This is a recorded preference." />
    <RadioGroup label="Choose a density" options={options} error="Choose a layout density before continuing." />
  </div>;
}

import { RadioGroup } from "@bosunkit/components/radio-group";
import { Button } from "@bosunkit/components/button";
import { useState, type Dispatch, type SubmitEvent, type ReactElement, type SetStateAction } from "react";
export const title: string = "Native submission and reset";
export default function Example(): ReactElement {
  const [result,setResult]: [string,Dispatch<SetStateAction<string>>] = useState("");
  function submit(event: SubmitEvent<HTMLFormElement>): void {
    event.preventDefault(); const data: FormData = new FormData(event.currentTarget);
    setResult(data.get("format") === "pdf" ? "Example form submitted PDF." : "Example form submitted Markdown.");
  }
  return <form onSubmit={submit} onReset={(): void => { setResult(""); }}>
    <RadioGroup label="Download format" name="format" required defaultValue="pdf" options={[{value:"pdf",label:"PDF"},{value:"markdown",label:"Markdown"}]} />
    <div style={{display:"flex",gap:"var(--space-sm)"}}><Button type="submit">Read form values</Button><Button type="reset" variant="ghost">Reset format</Button></div>
    <p role="status">{result}</p>
  </form>;
}