GroupCollect 1.3.142

Picker Card

Renders a card with the picker component. Footer in card is only visible when picker is checked.

Read more Read less

Supports an optional action with ‘icon’ and ‘click’ attributes.

Examples

<.picker_card id="king-room-picker-card" title="King room with pullout couch">
  <:description>
    Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays.
  </:description>
  <:description_tagline>
    <.responsive from="sm">
      <.h5>Complimentary</.h5>
    </.responsive>
    <.responsive upto="sm">
      <.h4>Complimentary</.h4>
    </.responsive>
  </:description_tagline>
  <:picker>
    <.input type="checkbox" name="test" value="yes" aria-label="Select card" />
  </:picker>
</.picker_card>
Select an option

King room with pullout couch

Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays.

King room with pullout couch

Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays.

Complimentary

King room with pullout couch

Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays.

$120-140

/ night

Attribute Type Documentation Default Value
Required id * :string
Required title * :string
Required description * :slot 
<:description>
  Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays.
</:description>
description_tagline :slot 
[Multiple values]
footer :slot 
[Multiple values]
picker :slot 
<:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}>
  <.input
    type="checkbox"
    name="test"
    value="yes"
    checked={false}
    aria-labelledby={title_container_id}
    aria_describedby={description_container_id}
    label="Select card"
    label_hidden="true"
  />
</:picker>