Github

Selection Card

Selection cards provide a visually rich alternative to radio buttons and checkboxes, combining an optional icon, title, and description into a selectable card layout.

Component variations

Radio Mode (Single Selection)

Use radio mode when only one option can be selected at a time.

Checkbox Mode (Multiple Selection)

Use checkbox mode when multiple options can be selected simultaneously.

With Description

Selection cards with supporting description text below the title.

With Icons

Selection cards with leading icons for visual context.

Disabled State

Selection cards in a disabled state.

Usage Guidelines

Import

Import the selection card group component and item interface:

import-selection-card.ts

Copy code

Radio Mode (Single Selection)

Use radio mode for mutually exclusive selections:

1. Define items in TypeScript

my.component.ts

Copy code

2. Use in template

my.component.html

Copy code

Checkbox Mode (Multiple Selection)

Use checkbox mode for multi-select options:

1. Define items in TypeScript

my.component.ts

Copy code

2. Use in template

my.component.html

Copy code

With Description

Add descriptions for additional context:

1. Define items with descriptions

my.component.ts

Copy code

2. Use in template

my.component.html

Copy code

Disabled State

Disable the entire group or individual items:

1. Define items in TypeScript

my.component.ts

Copy code

2. Use in template

my.component.html

Copy code

API Reference

VdSelectionCard Interface

Properties for each selection card item:

Property
Type
Required
Description
title
string
Yes
Display title for the selection card
value
string | number
Yes
Unique value emitted on selection
description
string
No
Supporting text displayed below the title
icon
string
No
Icon name to display (e.g. vd-icon-mail)
disabled
boolean
No
Disables this specific selection card item

Inputs

Property
Type
Default
Required
Description
items
VdSelectionCard[]
[]
Yes
List of selection card items
type
'radio' | 'checkbox'
'radio'
No
Selection mode: single (radio) or multiple (checkbox)
direction
'vertical' | 'horizontal'
'vertical'
No
Layout direction for the card group
value
string | number | Array<string | number> | null
null
No
Currently selected value(s)
disabled
boolean
false
No
Disables the entire group
name
string
auto-generated
No
HTML name attribute shared by child elements
columns
number
1
No
Number of grid columns for vertical layout

Outputs

Event emitters for selection changes:

Property
Type
Default
Required
Description
valueChange
EventEmitter<string | number | Array<string | number>>
N/A
N/A
Emits the selected value(s) when a card is clicked

Best Practices

When to Use

  • Use Selection Card when each option needs a richer visual representation than a standard radio/checkbox.
  • Use it for settings, plan selection, delivery options, or payment method selection.
  • Use radio mode for mutually exclusive choices, and checkbox mode for multi-select options.

When Not to Use

  • Avoid using Selection Card for simple yes/no toggles — use a switch instead.
  • Avoid using it for long lists of options — use a standard radio/checkbox group instead.
  • Avoid using it when space is limited and cards would stack poorly.

Design Guidelines

  • Always use within a group context — never render a single selection card alone.
  • Keep titles concise and descriptive.
  • Use icons consistently across all cards in a group.
  • Descriptions are optional but should be brief when used.
  • Limit to 3-5 cards per group for optimal usability.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the selection card in this section

example.html

Copy code