Radio cards

In FORMA

• Liegt in kit/arc/radio-cards und ist über @/forma/arc/radio-cards/radio-cards erreichbar.
• Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

• Choices where each option needs a description, price, or estimate to decide.
• Plan, shipping, region, or size pickers inside checkout and setup flows.
• Options that may be unavailable and need a visible reason.

When not to use

• Use radio-group for short text-only options.
• Use segmented-control for two to four view modes that switch content instantly.
• Use select or combobox for long lists.

Usage

import { RadioCards } from "@/forma/arc/radio-cards/radio-cards";

export function ShippingSpeed() {
  return (
    <RadioCards
      aria-label="Shipping speed"
      name="shipping"
      layout="list"
      defaultValue="standard"
      options={[
        { value: "standard", label: "Standard", description: "4 to 6 business days", meta: "Free" },
        { value: "express", label: "Express", description: "2 business days", meta: "$12" },
        { value: "overnight", label: "Overnight", meta: "$29", disabled: true, disabledReason: "Not available for this address" },
      ]}
    />
  );
}

API reference

RadioCards

Selectable option cards for choices that need more than a label. One selection ring glides from card to card, and the group behaves as a native radio group.

Keyboard interactions

Accessibility

• role="radiogroup" with role="radio" cards, aria-checked, and aria-disabled; give the group an aria-label or aria-labelledby.
• Each card is labelled by its label and described by its description, or by disabledReason when disabled.
• Selection is shown by a ring and a filled indicator dot, not color alone.

Motion

• One ring springs to the selected card's box and its size; resizes snap it without replaying the glide.
• The indicator dot scales in on the snappy spring.
• Reduced motion jumps the ring and dot to their final state.

Responsive behavior

• The grid uses auto-fill columns with a minimum of minColumnWidth, so it drops to one column in narrow containers.
• List layout keeps the indicator, text, and meta on one row and truncates nothing; long descriptions wrap.

Performance

• One ResizeObserver on the group keeps the ring aligned; the ring moves with motion values without re-rendering cards.

Notes for AI

• Choose it for three to six options that each need a description or price: plans, shipping speeds, regions, instance sizes.
• Pass name to submit with a native form; the value is carried by a hidden input.
• Use disabledReason to explain why an option is unavailable instead of hiding it.

Related

• Radio group: Choose one option from a visible set.
• Segmented control: Switch between a small set of related views.
• Billing toggle: A monthly and yearly switch with a savings badge and prices that roll to the new amount.

Also in toggles

• Checkbox: A binary choice with a precise, legible state.
• Switch: A tactile toggle for settings that take effect immediately.
• Rating: A simple, accessible way to capture a numeric opinion.

Guidance for AI tools

Radio cards: Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt