Client component

Radio Card

A card-shaped radio: the whole surface is the click target, with room for a title, description and leading addon. It joins Radio.Group exactly like Radio does: give it a value inside a group for single selection.

FreeFor personal projectsPro: $12/moFor growing teamsEnterpriseSSO, audit log, SLAs

import { Radio, RadioCard, Grid } from "astralis-ui";

export function RadioCardDemo() {
  return (
    <Radio.Group defaultValue="pro">
      <Grid columns={{ base: "1", sm: "3" }} gap="3" w="full" maxW="2xl">
        <RadioCard value="free" description="For personal projects">
          Free
        </RadioCard>
        <RadioCard value="pro" description="For growing teams">
          Pro: $12/mo
        </RadioCard>
        <RadioCard value="enterprise" description="SSO, audit log, SLAs">
          Enterprise
        </RadioCard>
      </Grid>
    </Radio.Group>
  );
}

ProFor growing teams

Title

value

indicator

size

colorScheme

invaliddisabled

import { RadioCard } from "astralis-ui";

<RadioCard
  description="For growing teams"
  defaultChecked
>
  Pro
</RadioCard>

Import#

import { RadioCard, Radio } from "astralis-ui";

Usage#

Put the cards inside a Radio.Group and give each a value. The group owns the selection and the shared name, so the choice submits with a native form and the arrow keys move between cards like any radio set. Reach for Radio Card over plain radios when each option needs a description, such as a pricing plan or a delivery method.

CourierWithin 2 hours, city centre onlyStandardNext working dayFreightPallets and bulky items

import { Icon, Radio, RadioCard, VStack } from "astralis-ui";
import { Bike, Car, Truck } from "lucide-react";

export function RadioCardAddon() {
  return (
    <Radio.Group defaultValue="standard" name="delivery">
      <VStack gap="2" alignItems="stretch" w="full" maxW="sm">
        <RadioCard value="courier" size="sm" addon={<Icon as={Bike} />} description="Within 2 hours, city centre only">
          Courier
        </RadioCard>
        <RadioCard value="standard" size="sm" addon={<Icon as={Car} />} description="Next working day">
          Standard
        </RadioCard>
        <RadioCard value="freight" size="sm" addon={<Icon as={Truck} />} description="Pallets and bulky items">
          Freight
        </RadioCard>
      </VStack>
    </Radio.Group>
  );
}

Props#

Extends the native radio input's props, plus:

Prop	Type	Default	Description
`children`	`ReactNode`	None	Card title.
`description`	`ReactNode`	None	Secondary line under the title.
`addon`	`ReactNode`	None	Leading slot for an icon or avatar.
`value`	`string`	None	The value this card selects inside a Radio.Group.
`indicator`	`boolean`	`true`	Shows a tick in the corner while selected.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Padding and text scale.
`colorScheme`	`all 15 schemes`	`"brand"`	Hue of the selected card.
`invalid`	`boolean`	`false`	Error styling and aria-invalid.
`disabled`	`boolean`	`false`	Blocks selection. Inherited from a Radio.Group or Field.

Keyboard#

Key	Action
`Tab`	Into the group: one tab stop, on the selected card
`←` `↑` / `→` `↓`	Select the previous / next card
`Space`	Select the focused card, when none is selected yet

For multiple selection, use Checkbox Card.