bcgov / bcgov/zeva2

ZEVA 2 - Create Selection Card component in Design System (Checkbox / Radio)

Open
#389 0 comments 0 reactions 1 assignee View on GitHub

@dallascrichmond is already working on this.

Since May 4, 2026.

Medium Task
Dominant language
TypeScript
Stars
1
Forks
6
Avg merge
8h 52m
Merged PRs (30d)
33

Description

Describe the task
Create a reusable Selection Card component for the design system.
This component represents selectable options displayed as cards with a title, description and selection control (checkbox or radio).
The component will be used for patterns like roles selection in Administration and potentially other areas of the system.
Components link

Purpose
Standardize this UI pattern in the design system and ensure consistent implementation across the product.

Acceptance Criteria

  • The component supports two variants: Checkbox & Radio
  • Component structure includes: selection control (checkbox or radio)/ title/ description text

The component supports the following states:

  • default

  • hover

  • selected

  • disabled

  • focus

  • The entire card is clickable, not only the checkbox/radio control.

  • Checkbox variant allows multiple selections.

  • Radio variant allows single selection within a group.

  • Visual styling follows the design system guidelines.

Additional context
This pattern is currently used in the Administration - Roles selection UI.
Design examples are attached.

Image Image

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.