SelectableCard

A card that is itself the interactive element: one button, no overlay and no nested controls. Use it as a button (onClick) or as a selectable option (selected). A disabled card keeps focus so its reason can be reached.

Import

import { SelectableCard } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/selectable-card.

Usage

<SelectableCard>
  <>
          <span className="font-semibold text-ink">Delivery</span>
          <span className="text-ink-3 text-meta">Llega en 35 min</span>
        </>
</SelectableCard>

Props

Prop	Type	Default	Description
children *	ReactNode		Card content. It sits inside a button, so use phrasing content only (spans, text, icons).
selected	boolean		Selectable mode. Omitted: the card is a plain button that runs onClick. A boolean makes it a toggle (aria-pressed), or a radio (aria-checked) with semantics="radio".
semantics	"radio" | "pressed"	"pressed"	"pressed" for a toggle (default), "radio" when exactly one card of a group is selected; wrap the group in role="radiogroup".
disabled	boolean	false	The card stays focusable and ignores clicks (aria-disabled), and the reason is read out with it.
disabledReason	string		Visible text explaining why the card is disabled; announced as its description.
classNames	Partial<Record<SelectableCardPart, string>>		Per-part classes merged with cn; consumer classes win. className still targets the root and is merged last.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Button
• Toggle
• Disabled
• Radio Group

Source

packages/ui/src/containers/selectable-card/selectable-card.tsx