A styled checkbox component that renders as a full-width card/block layout, combining a Radix UI checkbox primitive with a label, optional description, trailing slot, and inline error display. ## Key Components ### `CheckboxBlock` A `forwardRef` component wrapping `@radix-ui/react-checkbox` that renders a tappable card row containing: | Prop | Type | Description | |---|---|---| | `label` | `React.ReactNode` | Primary label (supports rich text/links) | | `description` | `React.ReactNode` | Optional secondary line below label | | `trailing` | `React.ReactNode` | Optional trailing slot (e.g. action button); must call `preventDefault` to avoid toggling | | `truncateLabel` | `boolean` | Ellipsize label overflow instead of wrapping | | `error` | `string` | Error message shown below the block; triggers red border | | `disabled` | `boolean` | Dims and disables interaction | | `checked` / `defaultChecked` | `boolean` | Controlled/uncontrolled checked state | | `onCheckedChange` | `(checked: boolean) => void` | Change handler | ## Usage Example ```typescript import { CheckboxBlock } from "./checkbox-block" // Uncontrolled with description console.log(checked)} /> // Controlled with error and trailing action { e.preventDefault(); openSettings() }}>Configure} error={!isChecked ? "This field is required" : undefined} /> // Truncated label, disabled ``` ## Notes - On mobile, `trailing` content stacks full-width below the text; on `md+` it aligns inline. - Minimum touch target height is `44px` (mobile) / `48px` (desktop), increasing to `60px`/`64px` when a description is present. - Error text is absolutely positioned below the block to avoid layout shift. - Source: [`checkbox-block.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/checkbox-block.tsx)