Choose Card

A selectable option card — a radio control paired with a title, description and trailing price. Used in plan pickers and choice lists. All values pulled directly from the LUSTER Figma variables.

Pro PlanAdvanced tools for growing professional teams. Free

Selection

Figma Properties
Title: "Pro Plan" (Inter 700 / 16px, #24242C)
Desc: #62626D (Inter 400 / 12px)
Price: "Free" (Inter 400 / 16px, #24242C)
Border: 2px #916DFF
Padding: 20px 28px · Gap: 16px

Tip: click the card to toggle selection.

Component · Choose Card

The selectable plan card — a Radio Button, a title + description text block, and a trailing price, inside a 2px purple border.

Pro PlanAdvanced tools for growing professional teams. Free

Selected

Pro PlanAdvanced tools for growing professional teams. Free

Unselected

Design Tokens

Token names mirror the LUSTER Figma variable paths one-to-one. Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

Token Name	Figma Variable	Default Value
--chooseCardTitleColor	chooseCard/title/color	#24242C
--chooseCardDescColor	chooseCard/desc/color	#62626D
--chooseCardPriceColor	chooseCard/price/color	#24242C
--chooseCardBorderColor	chooseCard/border/color	#916DFF
--chooseCardBorderWidth	chooseCard/border/width	2px
--chooseCardGap	chooseCard/gap	16px
--chooseCardTextGap	chooseCard/text/gap	12px
--chooseCardPaddingX	chooseCard/padding/x	28px
--chooseCardPaddingY	chooseCard/padding/y	20px
--sectionBgColor	section/bg/color	#FFFFFF
--sectionBorderRadius	section/border/radius	0px
--radioButtonActiveBgColor	radioButton/active/bg/color	#916DFF
--radioButtonActiveBorderColor	radioButton/active/border/color	#916DFF
--radioButtonBorderWidth	radioButton/border/width	1px
--titleFontSize	typography/title/font/size	16px
--titleFontLineHeight	typography/title/font/lineHeight	19px
--titleFontWeight	typography/title/font/weight	700
--caption1FontSize	typography/caption-1/font/size	12px
--caption1FontLineHeight	typography/caption-1/font/lineHeight	14px
--caption1FontWeight	typography/caption-1/font/weight	400
--bodyFontSize	typography/body/font/size	16px
--bodyFontLineHeight	typography/body/font/lineHeight	19px
--bodyFontWeight	typography/body/font/weight	400
--bodyFontFamily	body/font/family	Inter

Usage Guidelines

✓ DO

Group Choose Cards in a radio group so only one can be selected.

✓ DO

Keep the description to one short, benefit-led sentence.

✗ DON'T

Don't omit the price/value — it's the key decision driver.

✗ DON'T

Don't allow multiple selections — use checkboxes for that.

Implementation

Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

import './ChooseCard.css';

export interface ChooseCardProps {
  title: string; description: string; price: string;
  selected: boolean; onSelect: () => void;
}

export const ChooseCard = ({ title, description, price, selected, onSelect }: ChooseCardProps) => (
  <label className={`choose-card ${selected ? '' : 'unselected'}`} onClick={onSelect}>
    <span className="cc-radio"><span className="dot" /></span>
    <span className="cc-text">
      <span className="cc-title">{title}</span>
      <span className="cc-desc">{description}</span>
    </span>
    <span className="cc-price">{price}</span>
  </label>
);

/* Choose Card tokens — Diamond brand, Light mode */
:root {
  /* chooseCard — Component Brand */
  --chooseCardTitleColor: #24242C;   /* foreground/on surface */
  --chooseCardDescColor: #62626D;    /* foreground/description */
  --chooseCardPriceColor: #24242C;   /* foreground/on surface */
  --chooseCardBorderColor: #916DFF;  /* border/active */
  /* chooseCard — Density / Global */
  --chooseCardBorderWidth: 2px;      /* border/width/lg */
  --chooseCardGap: 16px;             /* Spacing/5xl */
  --chooseCardTextGap: 12px;         /* Spacing/4xl */
  --chooseCardPaddingX: 28px;        /* Spacing/8xl */
  --chooseCardPaddingY: 20px;        /* Spacing/6xl */
  /* section */
  --sectionBgColor: #FFFFFF;
  --sectionBorderRadius: 0px;
  /* radioButton */
  --radioButtonActiveBgColor: #916DFF;
  --radioButtonActiveBorderColor: #916DFF;
  --radioButtonBorderWidth: 1px;
  --radioButtonDefaultBorderColor: #ACADB2;
  /* Typography */
  --bodyFontFamily: 'Inter', sans-serif;
  --titleFontSize: 16px;   --titleFontLineHeight: 19px;   --titleFontWeight: 700;
  --caption1FontSize: 12px; --caption1FontLineHeight: 14px; --caption1FontWeight: 400;
  --bodyFontSize: 16px;    --bodyFontLineHeight: 19px;    --bodyFontWeight: 400;
}

.choose-card {
  display: flex; align-items: center; gap: var(--chooseCardGap);
  padding: var(--chooseCardPaddingY) var(--chooseCardPaddingX);
  background: var(--sectionBgColor);
  border: var(--chooseCardBorderWidth) solid var(--chooseCardBorderColor);
  border-radius: var(--sectionBorderRadius); cursor: pointer;
}
.cc-radio { width: 20px; height: 20px; border-radius: 50%; border: var(--chooseCardBorderWidth) solid var(--radioButtonActiveBorderColor); display: flex; align-items: center; justify-content: center; }
.cc-radio .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--radioButtonActiveBgColor); }
.choose-card.unselected .cc-radio { border-color: var(--radioButtonDefaultBorderColor); }
.choose-card.unselected .cc-radio .dot { background: transparent; }
.cc-text { display: flex; flex-direction: column; gap: var(--chooseCardTextGap); flex: 1; }
.cc-title { font-family: var(--bodyFontFamily); font-weight: var(--titleFontWeight); font-size: var(--titleFontSize); line-height: var(--titleFontLineHeight); color: var(--chooseCardTitleColor); }
.cc-desc  { font-family: var(--bodyFontFamily); font-weight: var(--caption1FontWeight); font-size: var(--caption1FontSize); line-height: var(--caption1FontLineHeight); color: var(--chooseCardDescColor); }
.cc-price { font-family: var(--bodyFontFamily); font-weight: var(--bodyFontWeight); font-size: var(--bodyFontSize); line-height: var(--bodyFontLineHeight); color: var(--chooseCardPriceColor); }

<label class="choose-card">
  <input type="radio" name="plan" hidden checked>
  <span class="cc-radio"><span class="dot"></span></span>
  <span class="cc-text">
    <span class="cc-title">Pro Plan</span>
    <span class="cc-desc">Advanced tools for growing professional teams.</span>
  </span>
  <span class="cc-price">Free</span>
</label>

import { useState } from 'react';
import { ChooseCard } from '@luster/ui';

export default function PlanPicker() {
  const [plan, setPlan] = useState('pro');
  return (
    <>
      <ChooseCard title="Pro Plan" description="Advanced tools for growing professional teams." price="Free" selected={plan==='pro'} onSelect={() => setPlan('pro')} />
      <ChooseCard title="Starter" description="Everything you need to begin." price="$0" selected={plan==='starter'} onSelect={() => setPlan('starter')} />
    </>
  );
}