PDS proposals
← All proposals

Card Select

Add a shadow prop to the PDS Card Select.

Extends a PDS componentOpen in Storybook

proposals/CardSelect/context.md30 lines · View on GitHub

Card Select

Problem

Every Card Select card has a drop shadow (--pds-elevation-raised, deeper on hover). In dense layouts and on surfaces that already carry elevation, the shadow adds visual weight. There is no way to turn it off.

Proposal

Add a shadow prop to the PDS Card Select. shadow={true} (default) is the unchanged PDS look. shadow={false} removes the shadow and draws the card with a border instead:

  • Unselected: a 1px border in the input border color.
  • Hover: a background tint, the same as the secondary Button hover.
  • Selected: the check indicator marks it and the border stays. With showIndicator={false}, the focus-color ring marks it instead.

Built as a wrapper around the published CardSelect; PDS is not changed.

Source

Brief from the designer, 2026-11-03.

Constraints

  • Tokens only; light and dark checked.
  • shadow={true} renders exactly as PDS does today.
  • Radio inputs, keyboard focus ring and labels come from PDS and stay as they are.

Open questions

None open. Figma form is discussed at stage 3.