Maskow Labs Logo Livewire Components

Selectable Cards

Selectable Cards provide an elegant way to present choice options as interactive cards. Users can select options by clicking anywhere on the card, making them perfect for visually rich forms and preference selections. 

1<x-selectable-card
2    type="checkbox"
3    value="starter"
4    title="Starter Plan"
5    description="Perfect for individuals and small projects"
6    wire:model="selectedPlan"
7/>

Radio Selection

Use type="radio" to allow single selection. This is perfect for plans or any scenario where users can choose a single option. 

 1<x-selectable-card
 2    id="plan-standard"
 3    type="radio"
 4    value="standard"
 5    title="Standard Plan"
 6    wire:model="wantedPlan"
 7/>
 8 
 9<x-selectable-card
10    id="plan-premium"
11    type="radio"
12    value="premium"
13    title="Premium Plan"
14    wire:model="wantedPlan"
15/>
16 
17<x-selectable-card
18    id="plan-enterprise"
19    type="radio"
20    value="enterprise"
21    title="Enterprise Plan"
22    wire:model="wantedPlan"
23/>

Cards with Descriptions

Add detailed descriptions using the description attribute to provide more context about each option. 

1<x-selectable-card
2    title="Cloud Hosting"
3    description="Managed cloud infrastructure with automatic scaling, load balancing, and 99.9% uptime guarantee. Perfect for businesses of any size."
4    value="cloud"
5/>

Custom Content

Use the card's slot to add custom content like icons, badges, pricing information, or any other HTML elements. 

1<x-selectable-card title="Basic Package" description="Essential features for getting started" value="basic">
2    <x-divider />
3    <div class="d-flex justify-content-between align-items-center">
4        <span class="fs-xxl fw-bold text-gray-900">$29</span>
5        <x-badge type="primary" class="fw-bold" size="sm" label >POPULAR</x-badge>
6    </div>
7</x-selectable-card>

Disabled State

Disable specific cards using the disabled attribute. Disabled cards cannot be selected and have a muted appearance. 

1<x-selectable-card
2    disabled
3    title="Overnight Shipping"
4    description="Currently unavailable in your area"
5    value="overnight"
6/>

Error Handling

Use show-errors="false" to hide error messages on individual cards. This is useful when you have multiple radio buttons in a group and want to show the error message only once for the entire group instead of on each card. 

1<x-selectable-card :show-errors="false" wire:model="contactMethod" value="email" title="Email" description="We'll send updates via email"  />
2 
3<!-- Centralized error message for the entire group -->
4@error('contactMethod')
5    <strong>Error:</strong> {{ $message }}
6@enderror