Forms

Checkboxes And Radios

Theme

Hound

Framework

Tailwind CSS

Forms

Checkboxes

Use the class .form-input-checkbox on any input[type=checkbox] element.

Default checkbox

.html
.html.erb
.haml.erb

<div class="form-group flex items-center">
  <input class="form-input-checkbox" type="checkbox" value="" id="check_default">
  <label class="ml-2" for="check_default">
    Default checkbox
  </label>
</div>

<!-- ActionView::Helpers::FormTagHelper -->
<%= tag.div class: "form-group flex items-center" do %>
  <%= check_box_tag :check_default, nil, false, class: "form-input-checkbox" %>
  <%= label_tag :check_default, "Default checkbox", class: "ml-2" %>
<% end %>

<!-- ActionView::Helpers::FormHelper -->
<%= form_with model: @form do |f| %>
  <% tag.div class: "form-group flex items-center" do %>
    <%= f.check_box :check_default, class: "form-input-checkbox" %>
    <%= f.label :check_default, "Default checkbox", class: "ml-2" %>
  <% end %>
  <%= f.submit class: "btn btn-primary" %>
<% end %>

/ ActionView::Helpers::FormHelper
= form_with model: @form do |f|
  .form-group.flex.items-center
    = f.check_box :check_default, class: "form-input-checkbox"
    = f.label :check_default, "Default checkbox", class: "ml-2"
  = f.submit class: "btn btn-primary"

Forms

Radios

Use the class .form-input-radio on any input[type=radio] element.

Because radio inputs typically appear in groups, you may offset block style radio inputs with simple margin and layout modifier classes Tailwind CSS ships with (e.g. mb-2, flex).

Default radio

Default checked radio

.html
.html.erb
.haml.erb

<div class="form-group">
  <div class="mb-2 flex items-center">
    <input class="form-input-radio" type="radio" name="radio_default" id="radio_default_1">
    <label class="ml-2" for="radio_default_1">
      Default radio
    </label>
  </div>
  <div class="flex items-center">
    <input class="form-input-radio" type="radio" name="radio_default" id="radio_default_2" checked>
    <label class="ml-2" for="radio_default_2">
      Default checked radio
    </label>
  </div>
</div>

<!-- ActionView::Helpers::FormTagHelper -->
<div class="form-group">
  <div class="mb-2 flex items-center">
    <%= radio_button_tag "radio_default", "1", false, class: "form-input-radio" %>
    <%= label_tag "radio_default_1", "Default radio", class: "ml-2" %>
  </div>

  <div class="flex items-center">
    <%= radio_button_tag "radio_default", "2", true, class: "form-input-radio" %>
    <%= label_tag "radio_default_2", "Default checked radio", class: "ml-2" %>
  </div>
</div>

<!-- ActionView::Helpers::FormHelper -->
<%= form_with model: @form do |f| %>
  <div class="form-group">
    <div class="mb-2 flex items-center">
      <%= f.radio_button_tag "radio_default", "1", false, class: "form-input-radio" %>
      <%= f.label :radio_default_1, "Default radio", class: "ml-2" %>
    </div>

    <div class="flex items-center">
      <%= f.radio_button_tag "radio_default", "2", true, class: "form-input-radio" %>
      <%= f.label :radio_default_2, "Default checked radio", class: "ml-2" %>
    </div>
  </div>

  <%= f.submit class: "btn btn-primary" %>
<% end %>

/ ActionView::Helpers::FormHelper
= form_with model: @form do |f|
  .form-group
    .mb-2.flex.items-center
      = f.radio_button_tag "radio_default", "1", false, class: "form-input-radio"
      = f.label :radio_default_1, "Default radio", class: "ml-2"
    .flex.items-center
      = f.radio_button_tag "radio_default", "2", true, class: "form-input-radio"
      = f.label :radio_default_2, "Default checked radio", class: "ml-2"
  = f.submit class: "btn btn-primary"

Forms

Switches

Use the class .form-input-switch on a input[type=checkbox] element. A corresponding <label> element must be present after the input in order for the switch UI to display.

Default switch checkbox input

.html
.html.erb
.haml.erb

<div class="form-group">
  <input class="form-input-switch" type="checkbox" role="switch" id="switch_default">
  <label class="form-label mb-0" for="switch_default">Default switch checkbox input</label>
</div>

<!-- ActionView::Helpers::FormTagHelper -->
<div class="form-group">
  <%= check_box_tag "switch_default", "1", false, class: "form-input-switch" %>
  <%= label_tag "switch_default", nil, class: "form-label mb-0" %>
</div>

<!-- ActionView::Helpers::FormHelper -->
<%= form_with model: @form do |f| %>
  <div class="form-group">
    <%= f.check_box :switch_default, class: "form-input-switch" %>
    <%= f.label :switch_default, class: "form-label mb-0" %>
  </div>
  <%= f.submit class: "btn btn-primary" %>
<% end %>

/ ActionView::Helpers::FormHelper
= form_with model: @form do |f|
  .form-group
    = f.check_box :switch_default, class: "form-input-switch"
    = f.label :switch_default, class: "form-label mb-0"
  = f.submit class: "btn btn-primary"

Selects

ActionText