BoardCN

Checkbox Card

Bordered selectable card driven by a checkbox.

Cards

Bordered rows driven by a checkbox or switch.

function CardControls() {
  return (
    <div className="grid w-full max-w-lg gap-3">
      <CheckboxCard
        defaultSelected
        title="Usage analytics"
        description="Share anonymized interaction data to help prioritize components."
      />
      <SwitchCard
        icon={RiMailLine}
        defaultSelected
        title="Weekly digest"
        description="A summary of new components and breaking changes."
      />
    </div>
  );
}
function CardControls() {
  return (
    <div className="grid w-full max-w-lg gap-3">
      <CheckboxCard
        defaultSelected
        title="Usage analytics"
        description="Share anonymized interaction data to help prioritize components."
      />
      <SwitchCard
        icon={RiMailLine}
        defaultSelected
        title="Weekly digest"
        description="A summary of new components and breaking changes."
      />
    </div>
  );
}

Installation

npx shadcn@latest add https://boardcn.dev/r/checkbox-card.json
npx shadcn@latest add https://boardcn.dev/r/checkbox-card.json

npm packages

  • react-aria-components

BoardCN dependencies

The CLI installs these for you — you do not need to add them yourself.

Source

The file the CLI copies into your project.

components/base/checkbox/checkbox-card.tsx
"use client";

import type { ReactNode, Ref } from "react";
import { Checkbox as AriaCheckbox } from "react-aria-components";
import type { CheckboxProps as AriaCheckboxProps } from "react-aria-components";
import { cx } from "@/utils/cx";
import { CheckboxGlyph } from "./checkbox-glyph";

export interface CheckboxCardProps extends Omit<AriaCheckboxProps, "children"> {
  title: ReactNode;
  description?: ReactNode;
  ref?: Ref<HTMLLabelElement>;
}

export function CheckboxCard({
  className,
  title,
  description,
  ref,
  ...props
}: CheckboxCardProps) {
  return (
    <AriaCheckbox
      ref={ref}
      {...props}
      className={(state) =>
        cx(
          "group flex w-full items-center justify-between gap-3 rounded-2lg border border-border-button-default py-3 pr-5 pl-4 select-none",
          "transition-colors duration-150 ease",
          state.isHovered && !state.isDisabled
            ? "bg-background-primary-hover"
            : "bg-background-primary-default",
          state.isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
          typeof className === "function" ? className(state) : className,
        )
      }
    >
      {(state) => (
        <>
          <span className="flex min-w-0 flex-col gap-0.5">
            <span className="truncate text-body-medium text-text-primary">{title}</span>
            {description !== undefined && description !== null && (
              <span className="truncate text-body-regular text-text-secondary">{description}</span>
            )}
          </span>
          <span className="flex shrink-0 items-center py-1">
            <CheckboxGlyph state={state} />
          </span>
        </>
      )}
    </AriaCheckbox>
  );
}
"use client";

import type { ReactNode, Ref } from "react";
import { Checkbox as AriaCheckbox } from "react-aria-components";
import type { CheckboxProps as AriaCheckboxProps } from "react-aria-components";
import { cx } from "@/utils/cx";
import { CheckboxGlyph } from "./checkbox-glyph";

export interface CheckboxCardProps extends Omit<AriaCheckboxProps, "children"> {
  title: ReactNode;
  description?: ReactNode;
  ref?: Ref<HTMLLabelElement>;
}

export function CheckboxCard({
  className,
  title,
  description,
  ref,
  ...props
}: CheckboxCardProps) {
  return (
    <AriaCheckbox
      ref={ref}
      {...props}
      className={(state) =>
        cx(
          "group flex w-full items-center justify-between gap-3 rounded-2lg border border-border-button-default py-3 pr-5 pl-4 select-none",
          "transition-colors duration-150 ease",
          state.isHovered && !state.isDisabled
            ? "bg-background-primary-hover"
            : "bg-background-primary-default",
          state.isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
          typeof className === "function" ? className(state) : className,
        )
      }
    >
      {(state) => (
        <>
          <span className="flex min-w-0 flex-col gap-0.5">
            <span className="truncate text-body-medium text-text-primary">{title}</span>
            {description !== undefined && description !== null && (
              <span className="truncate text-body-regular text-text-secondary">{description}</span>
            )}
          </span>
          <span className="flex shrink-0 items-center py-1">
            <CheckboxGlyph state={state} />
          </span>
        </>
      )}
    </AriaCheckbox>
  );
}

Props

Generated from the component's TypeScript types. Standard DOM and React Aria props are omitted.

CheckboxCard

PropTypeDefaultDescription
titlerequiredReactNode——
descriptionReactNode——