# SelectableCard

> A card that is itself the interactive element: one `button`, no overlay and no nested controls.

Source: https://ui.jcsoftdev.com/docs/components/selectable-card

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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/containers-selectablecard--button)
- [Toggle](/storybook/?path=/story/containers-selectablecard--toggle)
- [Disabled](/storybook/?path=/story/containers-selectablecard--disabled)
- [Radio Group](/storybook/?path=/story/containers-selectablecard--radio-group)

## Source

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