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.
<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 allows only one selectable card in the set to be selected.
<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>
Selectable Cards can pass text or block content.
<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>
<div class="pb--doc-demo-row"> <%= pb_rails("selectable_card", props: { text: "Selected With Options", input_id: "selected_with options", name: "selected_with options", value: "selected_with options", checked: true, input_options: { class: "input-class", name: "overwriting-name", value: "overwriting-value", } }) %> </div>
Selectable Cards can pass images with optional text.
<div class="pb--doc-demo-row"> <%= pb_rails("selectable_card", props: { input_id: "selectable-image-default", name: "selectable-image-default", value: "selectable-image-default", checked: true, icon: true }) do %> <%= pb_rails("image", props: { rounded: true, size: "xl",url: "https://unsplash.it/500/400/?image=634" }) %> <%= pb_rails("body", props: { tag: "span"}) do %> Add text here <% end %> <% end %> <%= pb_rails("selectable_card", props: { input_id: "selectable-image-xl", name: "selectable-image-xl", value: "selectable-image-xl", checked: false, icon: true }) do %> <%= pb_rails("image", props: { rounded: true, size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %> <% end %> </div>
Selectable Cards can show an input indicating state.
<%= pb_rails("title", props: { size: 3, text: "What programming languages do you know?" }) %> <br /> <%= pb_rails("selectable_card", props: { checked: true, input_id: "ruby", name: "ruby", value: "ruby", variant: "display_input" }) do %> Ruby <% end %> <%= pb_rails("selectable_card", props: { checked: true, input_id: "javascript", name: "javascript", value: "javascript", variant: "display_input" }) do %> JavaScript <% end %> <%= pb_rails("selectable_card", props: { input_id: "typescript", name: "typescript", value: "typescript", variant: "display_input" }) do %> TypeScript <% end %> <%= pb_rails("selectable_card", props: { input_id: "swift", name: "swift", value: "swift", variant: "display_input" }) do %> Swift <% end %> <br /> <%= pb_rails("title", props: { size: 3, text: "How likely are you to recommend Playbook to a friend?" }) %> <br /> <%= pb_rails("selectable_card", props: { checked: true, input_id: "first_radio", multi: false, name: "radio_group", value: "first_radio", variant: "display_input" }) do %> 5 <% end %> <%= pb_rails("selectable_card", props: { input_id: "second_radio", multi: false, name: "radio_group", value: "second_radio", variant: "display_input" }) do %> 4 <% end %> <%= pb_rails("selectable_card", props: { input_id: "third_radio", multi: false, name: "radio_group", value: "third_radio", variant: "display_input" }) do %> 3 <% end %> <%= pb_rails("selectable_card", props: { input_id: "fourth_radio", multi: false, name: "radio_group", value: "fourth_radio", variant: "display_input" }) do %> 2 <% end %> <%= pb_rails("selectable_card", props: { input_id: "fifth_radio", multi: false, name: "radio_group", value: "fifth_radio", variant: "display_input" }) do %> 1 <% end %>
<%= pb_rails("title", props: { size: 3, text: "What sports do you like?" }) %> <br /> <%= pb_rails("selectable_card", props: { error: true, input_id: "football", name: "football", value: "football", variant: "display_input" }) do %> Football <% end %> <%= pb_rails("selectable_card", props: { error: true, input_id: "basketball", name: "basketball", value: "basketball", variant: "display_input" }) do %> Basketball <% end %> <%= pb_rails("selectable_card", props: { error: true, input_id: "baseball", name: "baseball", value: "baseball", variant: "display_input" }) do %> Baseball <% end %>
Do not use Forms, Charts & Graphs, Text Input, Textarea, etc inside of selectable card.