# `PhiaUi.Components.SelectableCard`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/cards/selectable_card.ex#L1)

SelectableCard component — a card that acts as a radio button for visually rich option selection.

Renders each option as a styled card with `role="radio"` and `aria-checked`. Wrap multiple
cards in `selectable_card_group/1` (which carries `role="radiogroup"`) to form an accessible
radio group. Zero JavaScript — all selection state is managed server-side via LiveView.

## Variants

| Variant      | Description                          |
|--------------|--------------------------------------|
| `:default`   | Standard card with p-4 padding       |
| `:compact`   | Tighter card with p-3 padding        |

## Examples

    <%!-- Simple plan picker --%>
    <.selectable_card_group>
      <.selectable_card selected={@plan == "free"} on_click="choose_plan" value="free">
        <:title>Free Plan</:title>
        <:description>Up to 3 projects</:description>
      </.selectable_card>
      <.selectable_card selected={@plan == "pro"} on_click="choose_plan" value="pro">
        <:icon>★</:icon>
        <:title>Pro Plan</:title>
        <:description>Unlimited projects</:description>
      </.selectable_card>
    </.selectable_card_group>

    <%!-- Compact variant --%>
    <.selectable_card variant={:compact} selected={true}>
      <:title>Compact</:title>
    </.selectable_card>

# `selectable_card`

Renders a single selectable card option.

## Examples

    <.selectable_card selected={@choice == "a"} on_click="pick" value="a">
      <:title>Option A</:title>
      <:description>The first option</:description>
    </.selectable_card>

## Attributes

* `value` (`:string`) - Value sent as phx-value-value when clicked. Defaults to `nil`.
* `selected` (`:boolean`) - Whether this card is the currently selected option. Defaults to `false`.
* `on_click` (`:string`) - LiveView event dispatched via phx-click. Defaults to `nil`.
* `disabled` (`:boolean`) - Disables the card and prevents interaction. Defaults to `false`.
* `variant` (`:atom`) - Visual density — :default (p-4) or :compact (p-3). Defaults to `:default`. Must be one of `:default`, or `:compact`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root button element. Supports all globals plus: `["phx-click", "phx-value-value"]`.
## Slots

* `icon` - Optional icon rendered to the left of the text content.
* `title` (required) - Primary label for the option.
* `description` - Secondary supporting text rendered below the title.

# `selectable_card_group`

Renders a `role="radiogroup"` container that wraps multiple `selectable_card/1` components.

## Examples

    <.selectable_card_group>
      <.selectable_card selected={true}><:title>A</:title></.selectable_card>
      <.selectable_card><:title>B</:title></.selectable_card>
    </.selectable_card_group>

## Attributes

* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root div element.
## Slots

* `inner_block` (required) - Selectable card items.

---

*Consult [api-reference.md](api-reference.md) for complete listing*