Packages

mishka_chelekom

0.0.9
0.0.10-alpha.5 0.0.10-alpha.4 0.0.10-alpha.3 0.0.10-alpha.2 0.0.10-alpha.1 0.0.9 0.0.9-rc.2 0.0.9-rc.1 0.0.9-beta.5 0.0.9-beta.4 0.0.9-beta.3 0.0.9-beta.2 0.0.9-beta.1 0.0.9-alpha.20 0.0.9-alpha.18 0.0.9-alpha.17 0.0.9-alpha.16 0.0.9-alpha.15 0.0.9-alpha.14 0.0.9-alpha.13 0.0.9-alpha.12 0.0.9-alpha.11 0.0.9-alpha.10 0.0.9-alpha.9 0.0.9-alpha.8 0.0.9-alpha.7 0.0.9-alpha.6 0.0.9-alpha.5 0.0.9-alpha.4 0.0.9-alpha.3 0.0.9-alpha.2 0.0.9-alpha.1 0.0.8 0.0.8-rc.2 0.0.8-rc.1 0.0.8-beta.5 0.0.8-beta.4 0.0.8-beta.3 0.0.8-beta.2 0.0.8-beta.1 0.0.8-alpha.4 0.0.8-alpha.3 0.0.8-alpha.2 0.0.8-alpha.1 0.0.7 0.0.6 0.0.6-alpha.2 0.0.6-alpha.1 0.0.5 0.0.5-beta.2 0.0.5-beta.1 0.0.5-alpha.12 0.0.5-alpha.11 0.0.5-alpha.10 0.0.5-alpha.9 0.0.5-alpha.8 0.0.5-alpha.7 0.0.5-alpha.6 0.0.5-alpha.5 0.0.5-alpha.4 0.0.5-alpha.3 0.0.5-alpha.2 0.0.5-alpha.1 0.0.4 0.0.4-beta.3 0.0.4-beta.2 0.0.4-beta.1 0.0.4-alpha.9 0.0.4-alpha.8 0.0.4-alpha.7 0.0.4-alpha.6 0.0.4-alpha.5 0.0.4-alpha.4 0.0.4-alpha.3 0.0.4-alpha.2 0.0.4-alpha.1 0.0.3 0.0.3-alpha.3 0.0.3-alpha.2 0.0.3-alpha.1 0.0.2 0.0.2-rc.2 0.0.2-rc.1 0.0.2-beta.4 0.0.2-beta.3 0.0.2-beta.2 0.0.2-beta.1 0.0.2-alpha.3 0.0.2-alpha.2 0.0.2-alpha.1 0.0.1

Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView

HexDocs

Current section

Files

Jump to
Readme
91 Versions
10 Dependencies
Dependants
Files
Activity
mishka_chelekom usage-rules components radio_card.md
Raw

usage-rules/components/radio_card.md 

# Radio Card Component



Card-based radio selection with rich styling and layout options.



**Documentation**: https://mishka.tools/chelekom/docs/forms/radio-card



> **For LLM Agents**: If you need more details, examples, or edge cases not covered here, fetch the full documentation from the URL above.



## Generate



```bash

mix mishka.ui.gen.component radio_card

```



## Dependencies



| Type | Components |

|------|------------|

| **Necessary** | `icon` |

| **Optional** | None |

| **JavaScript** | None |



## Attributes



| Attribute | Type | Default | Description |

|-----------|------|---------|-------------|

| `variant` | `:string` | `"base"` | Style variant |

| `color` | `:string` | `"natural"` | Color theme |

| `border` | `:string` | `"extra_small"` | Border style |

| `rounded` | `:string` | `"medium"` | Border radius |

| `padding` | `:string` | `"small"` | Card padding |

| `space` | `:string` | `"small"` | Space between elements |

| `cols` | `:string` | `"one"` | Grid columns |

| `name` | `:string` | **required** | Input name |

| `icon` | `:string` | `nil` | Icon for cards |



## Slots



### `radio` Slot



Individual radio card options.



| Attribute | Type | Description |

|-----------|------|-------------|

| `value` | `:string` | Option value |

| `title` | `:string` | Card title |

| `description` | `:string` | Card description |

| `checked` | `:boolean` | Pre-selected state |



## Available Options



- **Variants**: `base`, `default`, `outline`, `shadow`, `bordered`

- **Colors**: `base`, `natural`, `primary`, `secondary`, `success`, `warning`, `danger`, `info`, `silver`, `misc`, `dark`, `white`, `dawn`

- **Sizes** (border/rounded/padding/space): `extra_small`, `small`, `medium`, `large`, `extra_large`



## Usage Examples



### Basic, with icon, and grid layout



```heex

<.radio_card name="plan">

  <:radio value="basic" title="Basic Plan" description="For individuals" />

  <:radio value="pro" title="Pro Plan" description="For teams" />

</.radio_card>



<.radio_card name="plan" icon="hero-home">

  <:radio value="basic" title="Basic" description="$9/month" />

  <:radio value="pro" title="Pro" description="$29/month" />

</.radio_card>



<.radio_card name="plan" cols="three" class="w-full">

  <:radio value="starter" title="Starter" description="For individuals" />

  <:radio value="team" title="Team" description="For small teams" />

  <:radio value="enterprise" title="Enterprise" description="For large orgs" />

</.radio_card>

```



### Custom content in the `radio` slot (with `variant`/`color`)



```heex

<.radio_card name="plan" variant="outline" color="primary">

  <:radio value="basic" title="Basic Plan">

    <p class="text-lg font-bold">$9/month</p>

    <ul class="text-sm mt-2">

      <li>5 projects</li>

      <li>Basic support</li>

    </ul>

  </:radio>

  <:radio value="pro" title="Pro Plan">

    <p class="text-lg font-bold">$29/month</p>

    <ul class="text-sm mt-2">

      <li>Unlimited projects</li>

      <li>Priority support</li>

    </ul>

  </:radio>

</.radio_card>

```



## Common Patterns



### Subscription Plans (grid + `checked` pre-selection)



```heex

<.radio_card name="subscription" cols="three" variant="shadow" class="w-full">

  <:radio value="free" title="Free" description="Forever free">

    <p class="text-2xl font-bold mt-2">$0</p>

  </:radio>

  <:radio value="pro" title="Pro" description="Most popular" checked>

    <p class="text-2xl font-bold mt-2">$19/mo</p>

  </:radio>

  <:radio value="team" title="Team" description="For organizations">

    <p class="text-2xl font-bold mt-2">$49/mo</p>

  </:radio>

</.radio_card>

```



### Shipping Options (`bordered` variant)



```heex

<.radio_card name="shipping" variant="bordered">

  <:radio value="standard" title="Standard Shipping" description="5-7 business days">

    <span class="font-bold">Free</span>

  </:radio>

  <:radio value="express" title="Express Shipping" description="2-3 business days">

    <span class="font-bold">$9.99</span>

  </:radio>

</.radio_card>

```