CheckCard

A native checkbox presented as a selectable content card.

Preview

Product updatesA monthly summary of new features and improvements.Monthly

Use CheckCard

CheckCard is a named export of @flood-md/react. Connect the package once, then import what you use.

PackageProject UI

"use client";

import { FloodRoot, CheckCard } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <CheckCard label="Product updates" description="A monthly summary of new features." name="updates" value="product" />
    </FloodRoot>
  );
}

Design notes

Uses native checkbox semantics, including mixed state, required and form reset.
Content is noninteractive: do not nest links or actions inside a card label.

API reference

Prop	Values	Default
`indeterminate`	boolean	—
`label`	string	Required
`description`	ReactNode	—
`icon`	ReactNode	—
`metadata`	ReactNode	—
`density`	"compact" \| "comfortable"	—
`Native HTML props`	Omit<Omit<InputHTMLAttributes<HTMLInputElement>, "type" \| "size">, "label" \| "children">	Forwarded

View TypeScript source

Page Markdown Agent skill