Create checkboxes with materializeCss cards in Rails 5.2 - ruby-on-rails

Question

I'm building a Rails app with some filters in it using Ransack, and I wan't that the users are able to search a property using cards like in the image below. When they select a card in my DB that will return.
My Current Ransack form
<%= search_form_for #q, html: {autocomplete: 'off'} do |f| %>
<div class="container">
<div class="row">
<!--APARTMENT CARD-->
<div class="col l6 s6">
<div class="card-panel hoverable b-radius5px">
<img style="width:60px;" class="center" src="https://res.cloudinary.com/craftwebs/image/upload/v1584137944/condominium_pltgkr.svg" alt="">
<span class="center blue-grey-text text-lighten-2" style="margin-left: -15px;">Apartment</span>
</div>
</div>
<!--HOUSE CARD-->
<div class="col l6 s6">
<div class="card-panel hoverable z-depth-1 b-radius5px">
<img style="width:60px;" class="center" src="https://res.cloudinary.com/craftwebs/image/upload/v1584138119/real-estate_mugxx7.svg" alt="">
<span class="center blue-grey-text text-lighten-2">House</span>
</div>
</div>
<div class="center">
<%= f.submit "Search", class:" waves-effect blue-kafasa-bn waves-light btn b-radius15px" %>
</div>
Now, the only way Im able to search these properties is via select:
<div class="col l6 m6 s12">
<%= f.select(:propertytype_eq, options_for_select(['Apartment', 'Office', 'House' ]), {:include_blank => 'Pick a property'} ) %>
</div>
This is how it looks in my logs when I search for a specific property in my app using select:
Parameters: {"utf8"=>"✓", "q"=>{"price_gteq"=>"", "price_lteq"=>"", "propertytype_eq"=>"Apartment"}, "commit"=>"Search"}
How Can I make that the users search a property by using cards and not a select? Do I need to modify the materialize checkbox?

Answer 1

Did you try using onclick functions for the cards? You can add a onclick event that either initiates navigation or sets a flag/variable for the option you want.