Selectable Card

Cards for information/content that can be selected. There is design for unselected and selected states. Typically used as a form element.


Default Selectable Cards are multi select by default.

Single Select

Single Select allows only one selectable card in the set to be selected.


Selectable Cards can pass text or block content.

Image Example

Selectable Cards can pass images with optional text.

Input Variant

Selectable Cards can show an input indicating state.

With Errors

Things to Avoid

Do not use Forms, Charts & Graphs, Text Input, Textarea, etc inside of selectable card.

Available Props