Skip to content

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

Free

Choice Cards Field for React

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

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. React with Base UI still allows only one card.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

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

Usage

<FieldGroup className="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 htmlFor="compute-kubernetes">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Kubernetes</FieldTitle>
            <FieldDescription>
              Run GPU workloads on a K8s configured cluster.
            </FieldDescription>
          </FieldContent>
          <RadioGroupItem id="compute-kubernetes" value="kubernetes" />
        </Field>
      </FieldLabel>
      <FieldLabel htmlFor="compute-vm">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Virtual Machine</FieldTitle>
            <FieldDescription>
              Access a VM configured cluster to run GPU workloads.
            </FieldDescription>
          </FieldContent>
          <RadioGroupItem id="compute-vm" 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", htmlFor="compute-kubernetes", orientation="horizontal" and htmlFor="compute-vm". The rest is on the Field page.

Radio Group

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

All 38 field examples