10.12.0

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


Default Selectable Cards are multi select by default.

Single Select


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

Block




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