Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Choice Cards Field for Svelte

Two bordered cards under Compute Environment: Kubernetes and Virtual Machine, each with a GPU note. Kubernetes starts selected.

UI library: Ark UI

Compute Environment asks you to select the environment for your cluster. Kubernetes, about GPU workloads on a K8s cluster, starts selected and highlighted. Virtual Machine describes a VM cluster for GPU work. Each row ends in a radio.

Choose it when every option needs a title and a line, and the whole row should select. A plain list of names is a Radio Group. Svelte with Ark UI still allows only one card.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Field anatomy: root, label, input, description, error

Usage

<FieldGroup class="w-full max-w-md"><FieldSet><FieldLegend variant="label">Compute Environment</FieldLegend><FieldDescription>Select the compute environment for your cluster.</FieldDescription><RadioGroup defaultValue="kubernetes"><FieldLabel><Field orientation="horizontal"><FieldContent><FieldTitle>Kubernetes</FieldTitle><FieldDescription>Run GPU workloads on a K8s configured cluster.</FieldDescription></FieldContent><RadioGroupItem value="kubernetes" /></Field></FieldLabel><FieldLabel><Field orientation="horizontal"><FieldContent><FieldTitle>Virtual Machine</FieldTitle><FieldDescription>Access a VM configured cluster to run GPU workloads.</FieldDescription></FieldContent><RadioGroupItem value="vm" /></Field></FieldLabel></RadioGroup></FieldSet></FieldGroup>

FAQ

How does the whole card select the radio?

FieldLabel wraps the Field, so the row is the label for that radio. RadioGroupItem sits at the end of the row.

Where do Kubernetes and Virtual Machine come from?

FieldTitle is the visible name, Kubernetes or Virtual Machine. The GPU sentence is the FieldDescription under that title, inside FieldContent.

What is the Compute Environment line?

FieldDescription under the caption reads Select the compute environment for your cluster. The caption is a FieldLegend with variant set to label, the quieter legend.

Which card starts selected?

defaultValue on RadioGroup is kubernetes. The other item's value is vm.

Why is the radio at the end of the card?

The inner Field sets orientation to horizontal, with FieldContent first and RadioGroupItem after it. FieldContent stacks the title and the description beside the radio.

How wide are the cards?

max-w-md caps the group. Both cards are rows in the same RadioGroup, so one environment is selected at a time.

API Reference

Field

Sets variant="label" and orientation="horizontal". The rest is on the Field page.

Radio Group

Sets defaultValue="kubernetes", value="kubernetes" and value="vm". The rest is on the Radio Group page.

All 38 field examples