PathCard

A large selectable card for choosing between paths, such as the ways to work with a company. A group of them sits in a ChoiceGroup.

import { PathCard } from '@zitdevs/ui';

Examples

One in each accent; the last is disabled.

How would you like to work with us?

ZitLancerProject assignmentsRemote, flexible work on projects with a defined scope.TeamA full-time roleA seat on the team that builds and runs our clients’ products.PartnerA shared clientFor studios and agencies that bring their own clients.AdvisorAn hour a monthNot open right now.

<ChoiceGroup id="track" legend="How would you like to work with us?">
  <div className="grid gap-4 md:grid-cols-2">
    <PathCard
      id="track-zitlancer"
      name="track"
      value="zitlancer"
      kicker="ZitLancer"
      label="Project assignments"
      description="Remote, flexible work on projects with a defined scope."
    />
    <PathCard
      id="track-team"
      name="track"
      value="team"
      accent="accent"
      kicker="Team"
      label="A full-time role"
      description="…"
    />
  </div>
</ChoiceGroup>

On its own:

LabsAn experimentTwo weeks to try an idea.

Props

Prop	Type	Default	Notes
id	string	required
name	string	required	Shared by the group, so only one can be chosen.
value	string	required	Submitted when chosen.
kicker	string	required	Read with label as the name.
label	string	required	The title.
description	string	required	Read as the description.
accent	'primary' | 'accent' | 'success' | 'ink'	'primary'	The kicker’s colour, and the frame’s and dot’s once chosen.
defaultChecked	boolean	false	checked with onChange holds it instead.
ref	Ref<HTMLInputElement>	—	The radio.
className	string	—	Placement, on the card.
anything else	<input> attributes	—	On the radio: required, disabled, onChange…

Exported types: PathCardProps.

Accessibility

• A native radio, named by the kicker and the title and described by the summary: it is announced as “ZitLancer, Project assignments”, not as the whole card read end to end.
• The card draws the focus ring while its hidden radio has focus; the ring wins over the chosen card’s shadow.
• The ring that shows a choice is there to make holds 3:1 before it is chosen.
• The kicker takes the accent only where it reads at 4.5:1: a success kicker is set in ink, since the green is 4.1:1 on white; the frame and the dot keep the green.

Without JavaScript

It needs none: the chosen state is drawn from the radio’s own :checked, through a named group, so an ancestor’s checked radio never marks every card. It renders as a Server Component.

Theming

surface-raised, border-default, ink and body; the accent’s role (primary, accent-strong and accent, ink and success, ink) for the kicker, the frame and the dot; border-control for the ring, shadow-radio-dot and shadow-md once chosen; the focus ring.