Control card
@xui/control-cardA selectable card wrapping a label and a checkbox/radio/switch indicator. The whole card is the control — click or press Space/Enter to toggle — and it shows an accented "selected" style while checked. Full ControlValueAccessor.
Install
pnpm add @xui/control-card Add the barrel to a standalone component's imports:
import { XuiControlCardImports } from '@xui/control-card';
@Component({
imports: [XuiControlCardImports],
// …
})Examples
Checkbox
Loading preview…
<div class="flex w-80 flex-col gap-2">
<xui-control-card [(checked)]="a">Enable notifications</xui-control-card>
<xui-control-card [(checked)]="b">Share usage data</xui-control-card>
</div>Switch
Loading preview…
<div class="w-80">
<xui-control-card type="switch" [(checked)]="on">Dark mode</xui-control-card>
</div>Radio
Loading preview…
<div class="flex w-80 flex-col gap-2">
<xui-control-card type="radio" [checked]="plan === 'free'" (checkedChange)="plan = 'free'">Free</xui-control-card>
<xui-control-card type="radio" [checked]="plan === 'pro'" (checkedChange)="plan = 'pro'">Pro</xui-control-card>
<xui-control-card type="radio" [checked]="plan === 'team'" (checkedChange)="plan = 'team'">Team</xui-control-card>
<p class="text-foreground-muted mt-2 text-sm">Plan: {{ plan }}</p>
</div>Disabled
Loading preview…
<div class="flex w-80 flex-col gap-2">
<xui-control-card disabled>Unavailable option</xui-control-card>
<xui-control-card disabled [checked]="true">Locked on</xui-control-card>
</div>API
A selectable card wrapping a label and a control indicator. The card itself is the interactive control — click or press Space/Enter to toggle — so there is no nested interactive element. type chooses the checkbox/radio/switch look and the matching ARIA role.
Variants
selectedfalseInputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''typeXuiControlCardTypeWhich control the card wraps — a checkbox, a radio or a switch. Picks both the rendered control and the selection semantics.'checkbox'checkedbooleanThe checked/selected state. Two-way bindable with [(checked)].falsedisabledbooleanBlock interaction and dim the card, including the control inside it.falseshowAsSelectedWhenCheckedbooleanWhether a checked card shows the selected (accented) appearance.true