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>

King room with pullout couch

<.picker_card
  id="picker-card-single-checkbox-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>
  <: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>
</.picker_card>

King room with pullout couch

<.picker_card
  id="picker-card-single-checkbox-picker-card-with-bold-tagline"
  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>
    <h4 class="gc-type-h5">Complimentary</h4>
  </:description_tagline>
  <: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>
</.picker_card>

King room with pullout couch

<.picker_card
  id="picker-card-single-checkbox-picker-card-with-mixed-tagline"
  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>
    <.row space="2xs" justify="start">
      <h4 class="gc-type-h5">$120-140</h4>
      <.p size="sm">/ night</.p>
    </.row>
  </:description_tagline>
  <: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>
</.picker_card>

King room with pullout couch

<.picker_card id="picker-card-single-radio-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>
  <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}>
    <.input
      type="radio"
      name="test"
      value="yes"
      checked={false}
      aria-labelledby={title_container_id}
      aria_describedby={description_container_id}
      label="Select card"
      label_hidden="true"
    />
  </:picker>
</.picker_card>

King room with pullout couch

<.picker_card
  id="picker-card-single-radio-picker-card-with-bold-tagline"
  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>
    <h4 class="gc-type-h5">Complimentary</h4>
  </:description_tagline>
  <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}>
    <.input
      type="radio"
      name="test"
      value="yes"
      checked={false}
      aria-labelledby={title_container_id}
      aria_describedby={description_container_id}
      label="Select card"
      label_hidden="true"
    />
  </:picker>
</.picker_card>

King room with pullout couch

<.picker_card
  id="picker-card-single-radio-picker-card-with-mixed-tagline"
  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>
    <.row space="2xs" justify="start">
      <h4 class="gc-type-h5">$120-140</h4>
      <.p size="sm">/ night</.p>
    </.row>
  </:description_tagline>
  <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}>
    <.input
      type="radio"
      name="test"
      value="yes"
      checked={false}
      aria-labelledby={title_container_id}
      aria_describedby={description_container_id}
      label="Select card"
      label_hidden="true"
    />
  </:picker>
</.picker_card>
Select an option

King room with pullout couch

King room with pullout couch

King room with pullout couch

<.picker_cards_fieldset id={"checkbox-picker-cards-group"} legend="Select an option" class="gc-gap-xl">
  <.picker_card
    id="picker-card-checkbox-group-checkbox-group-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>
    <: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>
  </.picker_card>
  <.picker_card
    id="picker-card-checkbox-group-checkbox-group-picker-card-with-bold-tagline"
    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>
      <h4 class="gc-type-h5">Complimentary</h4>
    </:description_tagline>
    <: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>
  </.picker_card>
  <.picker_card
    id="picker-card-checkbox-group-checkbox-group-picker-card-with-mixed-tagline"
    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>
      <.row space="2xs" justify="start">
        <h4 class="gc-type-h5">$120-140</h4>
        <.p size="sm">/ night</.p>
      </.row>
    </:description_tagline>
    <: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>
  </.picker_card>
  <.picker_card
    id="picker-card-checkbox-group-checkbox-group-picker-card-with-tagline-and-footer"
    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>
      <.row space="2xs" justify="start">
        <h4 class="gc-type-h5">$120-140</h4>
        <.p size="sm">/ night</.p>
      </.row>
    </:description_tagline>
    <:footer>
      <.row space="2xs" justify="start">
        <h4 class="gc-type-h5">20</h4>
        <.p size="sm">rooms will be requested</.p>
      </.row>
    </:footer>
    <: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>
  </.picker_card>
  <.picker_card
    id="picker-card-checkbox-group-checkbox-group-picker-card-with-tagline-and-footer-with-input"
    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>
      <.row space="2xs" justify="start">
        <h4 class="gc-type-h5">$120-140</h4>
        <.p size="sm">/ night</.p>
      </.row>
    </:description_tagline>
    <:footer>
      <.stack space="none" class="gc-width-136">
        <.input id={"checkbox_group_picker_card_with_tagline_and_footer_with_input_number_of_rooms"} type="text" name="number_of_rooms" value="" required label="No. of rooms" />
      </.stack>
    </:footer>
    <: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>
  </.picker_card>
  <.picker_card
    id="picker-card-checkbox-group-checkbox-group-picker-card-with-tagline-and-footer-with-error-input"
    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>
      <.row space="2xs" justify="start">
        <h4 class="gc-type-h5">$120-140</h4>
        <.p size="sm">/ night</.p>
      </.row>
    </:description_tagline>
    <:footer>
      <.stack space="none" class="gc-width-136">
        <.input id={"checkbox_group_picker_card_with_tagline_and_footer_with_error_input_number_of_rooms"} type="text" name="number_of_rooms" value="" required label="No. of rooms" errors={["Error helper text"]} />
      </.stack>
    </:footer>
    <: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>
  </.picker_card>
  <.picker_card
    id="picker-card-checkbox-group-checkbox-group-picker-card-with-tagline-and-footer-with-multiple-input"
    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>
      <.row space="2xs" justify="start">
        <h4 class="gc-type-h5">$120-140</h4>
        <.p size="sm">/ night</.p>
      </.row>
    </:description_tagline>
    <:footer>
      <.stacking_cluster space="xl" justify="start">
        <.stack space="none" class="gc-width-136">
          <.input id={"checkbox_group_picker_card_with_tagline_and_footer_with_multiple_input_number_of_buses"} type="text" name="number_of_buses" value="" required label="No. of buses" />
        </.stack>
        <.stack space="none" class="gc-width-136">
          <.input id={"checkbox_group_picker_card_with_tagline_and_footer_with_multiple_input_number_of_vehicles"} type="text" name="number_of_vehicles" value="" required label="No. of vehicles" />
        </.stack>
      </.stacking_cluster>
    </:footer>
    <: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>
  </.picker_card>
</.picker_cards_fieldset>
Select an option

King room with pullout couch

King room with pullout couch

King room with pullout couch

<.picker_cards_fieldset id={"radio-picker-cards-group"} legend="Select an option" class="gc-gap-xl">
  <.picker_card
    id="picker-card-radio-group-radio-group-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>
    <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}>
      <.input
        type="radio"
        name="test"
        value="yes"
        checked={false}
        aria-labelledby={title_container_id}
        aria_describedby={description_container_id}
        label="Select card"
        label_hidden="true"
      />
    </:picker>
  </.picker_card>
  <.picker_card
    id="picker-card-radio-group-radio-group-picker-card-with-bold-tagline"
    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>
      <h4 class="gc-type-h5">Complimentary</h4>
    </:description_tagline>
    <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}>
      <.input
        type="radio"
        name="test"
        value="yes"
        checked={false}
        aria-labelledby={title_container_id}
        aria_describedby={description_container_id}
        label="Select card"
        label_hidden="true"
      />
    </:picker>
  </.picker_card>
  <.picker_card
    id="picker-card-radio-group-radio-group-picker-card-with-mixed-tagline"
    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>
      <.row space="2xs" justify="start">
        <h4 class="gc-type-h5">$120-140</h4>
        <.p size="sm">/ night</.p>
      </.row>
    </:description_tagline>
    <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}>
      <.input
        type="radio"
        name="test"
        value="yes"
        checked={false}
        aria-labelledby={title_container_id}
        aria_describedby={description_container_id}
        label="Select card"
        label_hidden="true"
      />
    </:picker>
  </.picker_card>
  <.picker_card
    id="picker-card-radio-group-radio-group-picker-card-with-tagline-and-footer"
    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>
      <.row space="2xs" justify="start">
        <h4 class="gc-type-h5">$120-140</h4>
        <.p size="sm">/ night</.p>
      </.row>
    </:description_tagline>
    <:footer>
      <.row space="2xs" justify="start">
        <h4 class="gc-type-h5">20</h4>
        <.p size="sm">rooms will be requested</.p>
      </.row>
    </:footer>
    <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}>
      <.input
        type="radio"
        name="test"
        value="yes"
        checked={false}
        aria-labelledby={title_container_id}
        aria_describedby={description_container_id}
        label="Select card"
        label_hidden="true"
      />
    </:picker>
  </.picker_card>
  <.picker_card
    id="picker-card-radio-group-radio-group-picker-card-with-tagline-and-footer-with-input"
    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>
      <.row space="2xs" justify="start">
        <h4 class="gc-type-h5">$120-140</h4>
        <.p size="sm">/ night</.p>
      </.row>
    </:description_tagline>
    <:footer>
      <.stack space="none" class="gc-width-136">
        <.input id={"radio_group_picker_card_with_tagline_and_footer_with_input_number_of_rooms"} type="text" name="number_of_rooms" value="" required label="No. of rooms" />
      </.stack>
    </:footer>
    <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}>
      <.input
        type="radio"
        name="test"
        value="yes"
        checked={false}
        aria-labelledby={title_container_id}
        aria_describedby={description_container_id}
        label="Select card"
        label_hidden="true"
      />
    </:picker>
  </.picker_card>
  <.picker_card
    id="picker-card-radio-group-radio-group-picker-card-with-tagline-and-footer-with-error-input"
    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>
      <.row space="2xs" justify="start">
        <h4 class="gc-type-h5">$120-140</h4>
        <.p size="sm">/ night</.p>
      </.row>
    </:description_tagline>
    <:footer>
      <.stack space="none" class="gc-width-136">
        <.input id={"radio_group_picker_card_with_tagline_and_footer_with_error_input_number_of_rooms"} type="text" name="number_of_rooms" value="" required label="No. of rooms" errors={["Error helper text"]} />
      </.stack>
    </:footer>
    <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}>
      <.input
        type="radio"
        name="test"
        value="yes"
        checked={false}
        aria-labelledby={title_container_id}
        aria_describedby={description_container_id}
        label="Select card"
        label_hidden="true"
      />
    </:picker>
  </.picker_card>
  <.picker_card
    id="picker-card-radio-group-radio-group-picker-card-with-tagline-and-footer-with-multiple-input"
    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>
      <.row space="2xs" justify="start">
        <h4 class="gc-type-h5">$120-140</h4>
        <.p size="sm">/ night</.p>
      </.row>
    </:description_tagline>
    <:footer>
      <.stacking_cluster space="xl" justify="start">
        <.stack space="none" class="gc-width-136">
          <.input id={"radio_group_picker_card_with_tagline_and_footer_with_multiple_input_number_of_buses"} type="text" name="number_of_buses" value="" required label="No. of buses" />
        </.stack>
        <.stack space="none" class="gc-width-136">
          <.input id={"radio_group_picker_card_with_tagline_and_footer_with_multiple_input_number_of_vehicles"} type="text" name="number_of_vehicles" value="" required label="No. of vehicles" />
        </.stack>
      </.stacking_cluster>
    </:footer>
    <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}>
      <.input
        type="radio"
        name="test"
        value="yes"
        checked={false}
        aria-labelledby={title_container_id}
        aria_describedby={description_container_id}
        label="Select card"
        label_hidden="true"
      />
    </:picker>
  </.picker_card>
</.picker_cards_fieldset>