Chevron left

Forms

Selects

Theme

Themes/hound/logo.svg

Hound

Framework

Tailwind CSS logo

Tailwind CSS

Forms

Select

<label for="select-example" class="form-label">Select one</label>
<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<!-- ActionView::Helpers::FormTagHelper -->
<%= tag.label "Select one", class: "form-label" %>
<%= tag.select class: "form-select", "aria-label": "Default select example" do %>
  <%= tag.option "Open this select menu", selected: true %>
  <%= tag.option "One", value: "1" %>
  <%= tag.option "Two", value: "2" %>
  <%= tag.option "Three", value: "3" %>
<% end %>

<!-- ActionView::Helpers::FormHelper -->
<%= form_with model: @form do |f| %>
  <%= f.label :select_1, "Select example", class: "form-label" %>
  <%= f.select :select_1, options_for_select([["One", "1"], ["Two", "1"], ["Three", "1"]]), { prompt: "Open this select menu" }, { class: "form-select", "aria-label": "Default select example" } %>
<% end %>
/ ActionView::Helpers::FormHelper
= form_with model: @form do |f|
.mb-3
  = f.label :select_1, "Select example", class:  "form-label"
  = f.select :select_1, options_for_select([["One", "1"], ["Two", "1"], ["Three", "1"]]), { prompt: "Open this select menu" }, { class: "form-select", "aria-label": "Default select example" }
= f.submit class: "btn btn-primary"

Forms

Dates

<div class="flex items-center space-x-3 max-w-sm">
  <select id="date_month" name="data[month]" class="form-select">
      <!-- options -->
  </select>
  <select id="date_day" name="data[day]" class="form-select">
      <!-- options -->
  </select>
  <select id="date_year" name="data[year]" class="form-select">
      <!-- options -->
  </select>
</div>
<div class="form-group flex items-center space-x-3 max-w-sm">
  <%= select_day Date.today.day, {}, { class: "form-select" }  %>
  <%= select_month Date.today.month, {}, { class: "form-select" }%>
  <%= select_year Date.today.year, {}, { class: "form-select" } %>
</div>
.form-group.flex.items-center.space-x-3.max-w-sm
  = select_day Date.today.day, {}, { class: "form-select" }  %>
  = select_month Date.today.month, {}, { class: "form-select" }%>
  = select_year Date.today.year, {}, { class: "form-select" } %>