Selectable Card

@/components/kamod-ui/selectable-card

Kubernetes

Best for clustered workloads and autoscaling.

Virtual machine

Good for predictable apps and direct control.

Installation

Import SelectableCard from `@/components/kamod-ui/selectable-card` and wrap it in RadioGroup.

pnpm add @kamod-ch/ui

Usage

Use SelectableCard when you want radio semantics with a larger click target. Keep the option text inside the card so the radio gets a clear accessible name. Use defaultValue for uncontrolled groups, or value with onValueChange when the parent owns state.

import { SelectableCard } from "@/components/kamod-ui/selectable-card";

<SelectableCard />

Demo

A pair of card-style radio options for choosing an infrastructure target.

Disabled state

Disabled cards keep the same structure and dim themselves automatically.

Starter

Simple deployments for small projects.

Enterprise

Available on request for approved accounts.

API Reference

Props, slots and variants for this component.

Selectable Card

Selectable Card component props and accepted values.

Prop	Type	Default
value	`string`	`required`
disabled	`boolean`	`false`
class	`string`	`undefined`
children	`ComponentChildren`	`undefined`

Accessibility Notes

Keep SelectableCard inside RadioGroup so keyboard navigation, roving focus, and selection semantics stay intact. Put meaningful text inside the card so each option has a clear accessible name.