Selectable Card

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

Rails
React

Default

Selected, with icon

Selected, without icon

Unselected

Disabled

Default Selectable Cards are multi select by default.

Code Example

<div class="pb--doc-demo-row">

  <%= pb_rails("selectable_card", props: {
    input_id: "selected_with_icon",
    name: "selected_with_icon",
    value: "selected_with_icon",
    checked: true,
    icon: true
  }) do %>
    Selected, with icon
  <% end %>

  <%= pb_rails("selectable_card", props: {
    input_id: "selected_without_icon",
    name: "selected_without_icon",
    value: "selected_without_icon",
    checked: true,
  }) do %>
    Selected, without icon
  <% end %>

  <%= pb_rails("selectable_card", props: {
    input_id: "unselected",
    name: "unselected",
    value: "unselected",
  }) do %>
    Unselected
  <% end %>

  <%= pb_rails("selectable_card", props: {
    input_id: "disabled",
    name: "disabled",
    value: "disabled",
    disabled: true
  }) do %>
    Disabled
  <% end %>
  
</div>

Single Select

Male

Female

Other

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

Code Example

<div class="pb--doc-demo-row">

  <%= pb_rails("selectable_card", props: {
    input_id: "male",
    name: "gender",
    value: "male",
    multi: false
  }) do %>
    Male
  <% end %>

  <%= pb_rails("selectable_card", props: {
    input_id: "female",
    name: "gender",
    value: "female",
    multi: false
  }) do %>
    Female
  <% end %>

  <%= pb_rails("selectable_card", props: {
    input_id: "other",
    name: "gender",
    value: "other",
    multi: false
  }) do %>
    Other
  <% end %>
  
</div>

Block

This uses block

This passes in text

Selectable Cards can pass text or block content.

Code Example

<div class="pb--doc-demo-row">

  <%= pb_rails("selectable_card", props: {
    input_id: "block",
    name: "block",
    value: "block",
    checked: true
  }) do %>
    <%= pb_rails("title", props: { text: "Block", size: 4 }) %>
    <%= pb_rails("body", props: { tag: "span"}) do %>
      This uses block
    <% end %>
  <% end %>

  <br><br>

  <%= pb_rails("selectable_card", props: {
    input_id: "tag",
    name: "tag",
    value: "tag",
    text: "This passes in text",
    checked: false
  }) %>

</div>

Dark