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.

With Options

Image Example

Selectable Cards can pass images with optional text.

Input Variant

What programming languages do you know?

How likely are you to recommend Playbook to a friend?

Selectable Cards can show an input indicating state.

With Errors

What sports do you like?

Things to Avoid

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

Available Props

  • classname
  • dark
  • margin
  • margin_bottom
  • margin_left
  • margin_right
  • margin_top
  • margin_x
  • margin_y
  • max_width
  • padding
  • padding_bottom
  • padding_left
  • padding_right
  • padding_top
  • padding_x
  • padding_y
  • z_index
  • number_spacing
  • id
  • data
  • aria
  • children
  • checked
  • disabled
  • error
  • icon
  • multi
  • input_id
  • input_options
  • name
  • text
  • value
  • variant