PhiaUi.Components.SelectableCard (phia_ui v0.1.17)

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>

Summary

Functions

selectable_card(assigns)

Renders a single selectable card option.

selectable_card_group(assigns)

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

Functions

selectable_card(assigns)

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(assigns)

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.