Select Card
Card-based radio selection group for choosing an account or workspace, with selection ring and check-circle indicator.
Preview
resources/views/blocks/select-card.blade.php
@props([
'legend' => 'Select account',
'submitLabel' => 'Continue',
])
{{--
Select Card 01 — Card-based radio selection group for choosing an account or workspace.
Native <input type="radio"> elements are sr-only for semantic keyboard/arrow-key support.
Visual selection state is driven by Alpine x-data binding border/ring classes to the
matched card surface. A check-circle SVG appears only on the active option.
--}}
<x-ui.section
data-slot="block-select-card"
space="lg" {{ $attributes }}
>
<div class="mx-auto max-w-lg px-4">
<div
x-data="{
selected: 'personal',
init() {},
destroy() {},
}"
>
<fieldset class="space-y-6">
<legend class="text-xl font-semibold text-foreground">{{ __($legend) }}</legend>
<div class="space-y-4" role="radiogroup">
{{-- Option 1: Personal --}}
<label class="block cursor-pointer focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 rounded-lg">
<input type="radio" name="account" value="personal" x-model="selected" class="sr-only" />
<x-ui.card
:class="'transition-all'"
x-bind:class="selected === 'personal' ? 'border-primary ring-2 ring-ring' : 'border-border hover:border-muted-foreground/30'"
>
<x-ui.card.content class="flex items-center gap-4 p-4">
{{-- Icon tile --}}
<x-ui.icon.tile>
<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
</x-ui.icon.tile>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-foreground">{{ __('Personal') }}</p>
<p class="text-xs text-muted-foreground truncate">you@example.com</p>
</div>
<div class="flex shrink-0 items-center gap-2">
<x-ui.badge variant="secondary">{{ __('Current') }}</x-ui.badge>
{{-- Check icon — shown when selected --}}
<svg
x-show="selected === 'personal'"
class="size-5 text-primary"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<path d="m9 12 2 2 4-4" />
</svg>
</div>
</x-ui.card.content>
</x-ui.card>
</label>
{{-- Option 2: Work --}}
<label class="block cursor-pointer focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 rounded-lg">
<input type="radio" name="account" value="work" x-model="selected" class="sr-only" />
<x-ui.card
x-bind:class="selected === 'work' ? 'border-primary ring-2 ring-ring' : 'border-border hover:border-muted-foreground/30'"
class="transition-all"
>
<x-ui.card.content class="flex items-center gap-4 p-4">
<span class="grid size-10 shrink-0 place-items-center rounded-md bg-secondary text-secondary-foreground" aria-hidden="true">
<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect width="20" height="14" x="2" y="7" rx="2" ry="2" />
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
</svg>
</span>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-foreground">{{ __('Work') }}</p>
<p class="text-xs text-muted-foreground truncate">you@company.com</p>
</div>
<div class="flex shrink-0 items-center gap-2">
<x-ui.badge>{{ __('Pro') }}</x-ui.badge>
<svg
x-show="selected === 'work'"
class="size-5 text-primary"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<path d="m9 12 2 2 4-4" />
</svg>
</div>
</x-ui.card.content>
</x-ui.card>
</label>
{{-- Option 3: Open Source --}}
<label class="block cursor-pointer focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 rounded-lg">
<input type="radio" name="account" value="opensource" x-model="selected" class="sr-only" />
<x-ui.card
x-bind:class="selected === 'opensource' ? 'border-primary ring-2 ring-ring' : 'border-border hover:border-muted-foreground/30'"
class="transition-all"
>
<x-ui.card.content class="flex items-center gap-4 p-4">
<span class="grid size-10 shrink-0 place-items-center rounded-md bg-accent text-accent-foreground" aria-hidden="true">
<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
<path d="M9 18c-4.51 2-5-2-7-2" />
</svg>
</span>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-foreground">{{ __('Open Source') }}</p>
<p class="text-xs text-muted-foreground truncate">you@github.com</p>
</div>
<div class="flex shrink-0 items-center gap-2">
<x-ui.badge variant="outline">{{ __('Free') }}</x-ui.badge>
<svg
x-show="selected === 'opensource'"
class="size-5 text-primary"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<path d="m9 12 2 2 4-4" />
</svg>
</div>
</x-ui.card.content>
</x-ui.card>
</label>
</div>
<x-ui.button type="button" class="w-full">{{ __($submitLabel) }}</x-ui.button>
</fieldset>
</div>
</div>
</x-ui.section>Installation
terminal
php artisan ui:add blocks/select-cardRegistry contract
Install confidence
php artisan ui:add blocks/select-card
writes only the generated targets below. The CLI validates each file hash before writing and
prompts before replacing local changes unless --force is used.
- Version
- 1.0.6
- License
- open
- Stability
- stable
- Contract
- v1
- Foundation
- ≥ 1.0.0
| Type | Generated target |
|---|---|
| blade | resources/views/blocks/select-card.blade.php |
Registry dependencies
badge
button
card
icon
section
Package dependencies
composer: jml/brok:^0.2
Use with AI
A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.
select-card.md
# Brok UI block: Select Card (`select-card`)
Card-based radio selection group for choosing an account or workspace, with selection ring and check-circle indicator.
Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.
## Install
```bash
php artisan ui:add blocks/select-card
```
## Render it
```blade
<x-blocks.select-card />
```
## Props
- `legend` (string, default `Select account`) — Fieldset legend describing the choice.
- `submit-label` (string, default `Continue`) — Submit button label.
## Use when
- Letting someone choose one option from a small set of cards, such as picking an account or workspace during onboarding.
- Wanting the choice to use a visual card with a selection ring and check indicator rather than a plain radio list.
## Avoid when
- Choosing from a long list of options; use a select or radio-group primitive instead.
## Rules
- Render the installed block with `<x-blocks.select-card />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.
## Links
- Docs: https://brokui.dev/blocks/select-card
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/select-card.json
Ask about Select Card in
Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.
Guidance
Use when
- Letting someone choose one option from a small set of cards, such as picking an account or workspace during onboarding.
- Wanting the choice to use a visual card with a selection ring and check indicator rather than a plain radio list.
Avoid when
- Choosing from a long list of options; use a select or radio-group primitive instead.
Anti-patterns
- Do not replace semantic props with conflicting utility classes.
- Do not remove labels, focus styles, or state attributes.
- Anatomy
Usage
Render the block as a component, passing data where useful:
resources/views/welcome.blade.php
<x-blocks.select-card />Built from primitives
This block composes installed <brok:*> primitives and semantic design
tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by
editing CSS variables; flip the preview to RTL to confirm it mirrors.
Source
The exact, editable file ui:add writes
into your app. The preview above renders this same source — there are no preview-only blocks.
resources/views/blocks/select-card.blade.php
@props([
'legend' => 'Select account',
'submitLabel' => 'Continue',
])
{{--
Select Card 01 — Card-based radio selection group for choosing an account or workspace.
Native <input type="radio"> elements are sr-only for semantic keyboard/arrow-key support.
Visual selection state is driven by Alpine x-data binding border/ring classes to the
matched card surface. A check-circle SVG appears only on the active option.
--}}
<x-ui.section
data-slot="block-select-card"
space="lg" {{ $attributes }}
>
<div class="mx-auto max-w-lg px-4">
<div
x-data="{
selected: 'personal',
init() {},
destroy() {},
}"
>
<fieldset class="space-y-6">
<legend class="text-xl font-semibold text-foreground">{{ __($legend) }}</legend>
<div class="space-y-4" role="radiogroup">
{{-- Option 1: Personal --}}
<label class="block cursor-pointer focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 rounded-lg">
<input type="radio" name="account" value="personal" x-model="selected" class="sr-only" />
<x-ui.card
:class="'transition-all'"
x-bind:class="selected === 'personal' ? 'border-primary ring-2 ring-ring' : 'border-border hover:border-muted-foreground/30'"
>
<x-ui.card.content class="flex items-center gap-4 p-4">
{{-- Icon tile --}}
<x-ui.icon.tile>
<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
</x-ui.icon.tile>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-foreground">{{ __('Personal') }}</p>
<p class="text-xs text-muted-foreground truncate">you@example.com</p>
</div>
<div class="flex shrink-0 items-center gap-2">
<x-ui.badge variant="secondary">{{ __('Current') }}</x-ui.badge>
{{-- Check icon — shown when selected --}}
<svg
x-show="selected === 'personal'"
class="size-5 text-primary"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<path d="m9 12 2 2 4-4" />
</svg>
</div>
</x-ui.card.content>
</x-ui.card>
</label>
{{-- Option 2: Work --}}
<label class="block cursor-pointer focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 rounded-lg">
<input type="radio" name="account" value="work" x-model="selected" class="sr-only" />
<x-ui.card
x-bind:class="selected === 'work' ? 'border-primary ring-2 ring-ring' : 'border-border hover:border-muted-foreground/30'"
class="transition-all"
>
<x-ui.card.content class="flex items-center gap-4 p-4">
<span class="grid size-10 shrink-0 place-items-center rounded-md bg-secondary text-secondary-foreground" aria-hidden="true">
<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect width="20" height="14" x="2" y="7" rx="2" ry="2" />
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
</svg>
</span>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-foreground">{{ __('Work') }}</p>
<p class="text-xs text-muted-foreground truncate">you@company.com</p>
</div>
<div class="flex shrink-0 items-center gap-2">
<x-ui.badge>{{ __('Pro') }}</x-ui.badge>
<svg
x-show="selected === 'work'"
class="size-5 text-primary"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<path d="m9 12 2 2 4-4" />
</svg>
</div>
</x-ui.card.content>
</x-ui.card>
</label>
{{-- Option 3: Open Source --}}
<label class="block cursor-pointer focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 rounded-lg">
<input type="radio" name="account" value="opensource" x-model="selected" class="sr-only" />
<x-ui.card
x-bind:class="selected === 'opensource' ? 'border-primary ring-2 ring-ring' : 'border-border hover:border-muted-foreground/30'"
class="transition-all"
>
<x-ui.card.content class="flex items-center gap-4 p-4">
<span class="grid size-10 shrink-0 place-items-center rounded-md bg-accent text-accent-foreground" aria-hidden="true">
<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
<path d="M9 18c-4.51 2-5-2-7-2" />
</svg>
</span>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-foreground">{{ __('Open Source') }}</p>
<p class="text-xs text-muted-foreground truncate">you@github.com</p>
</div>
<div class="flex shrink-0 items-center gap-2">
<x-ui.badge variant="outline">{{ __('Free') }}</x-ui.badge>
<svg
x-show="selected === 'opensource'"
class="size-5 text-primary"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<path d="m9 12 2 2 4-4" />
</svg>
</div>
</x-ui.card.content>
</x-ui.card>
</label>
</div>
<x-ui.button type="button" class="w-full">{{ __($submitLabel) }}</x-ui.button>
</fieldset>
</div>
</div>
</x-ui.section>
Ownership & lifecycle
Owner, release state, review evidence and adoption for this item.
- Owner
- Platform UI (@JoshJML)
- Current version
-
1.0.6 - Status
- Stable
- License
-
open - Deprecation
- Not deprecated
- Contract
-
v1 - Foundation
-
≥ 1.0.0