Checkbox Field(ui_checkbox_field)Bootstrap Logo

UiBibz::Ui::Core::Forms::Choices::CheckboxField

Custom Checkboxes for form.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

 # by variable 
 ui_checkbox_field name, options, html_options 

 # or by block 
 ui_checkbox_field options, html_options do 
   name 
 end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • boolean[boolean]If your checkbox is for a boolean
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • inline[boolean]
  • intermediate[boolean]
  • label[string/boolean]
  • label_html[hash]Html options for the label
  • state[symbol](:disabled, :active)(use component state method)
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)
  • value[boolean/string/integer]
  • wrapper_html[hash]Html options for the wrapper

Examples

Some examples explain how to use the options present in the component.

Checkbox

ui_checkbox_field :custom_check

<div class="form-check">
  <input type="hidden" name="custom_check" id="custom_check-hidden" value="0">
  <input type="checkbox" name="custom_check" id="custom_check" value="1" class="form-check-input">
  <label class="form-check-label" for="custom_check">custom_check</label>
</div>

Boolean

ui_checkbox_field "boolean", boolean: true

<div class="form-check form-check-inline">
  <input type="hidden" name="inline-1" id="inline-1-hidden" value="0">
  <input type="checkbox" name="inline-1" id="inline-1" value="checkbox-1" class="form-check-input" checked="checked">
  <label class="form-check-label" for="inline-1">Checkbox 1</label>
</div>

Inline

ui_checkbox_field :checkbox_1, value: 'Checkbox 1', inline: true, checked: true

<div class="form-check form-check-inline">
  <input type="checkbox" name="inline-1" id="inline-1" value="checkbox-1" class="form-check-input" checked="checked">
  <label class="form-check-label" for="inline-1">Checkbox 1</label>
</div>

State

ui_checkbox_field :state,  value: true, state: :disabled, label: 'active'
ui_checkbox_field :state,  value: false, state: :disabled, label: 'disabled', checked: true

<div class="disabled form-check">
  <input type="checkbox" name="state_1" id="state_1" value="true" disabled="disabled" class="form-check-input">
  <label class="form-check-label" for="state_1">choice 1</label>
</div>
<div class="disabled form-check">
  <input type="checkbox" name="state_2" id="state_2" value="1" disabled="disabled" class="form-check-input" checked="checked">
  <label class="form-check-label" for="state_2">choice 2</label>
</div>

Status

The status option has following symbols for argument:
  • :primary
  • :secondary
  • :success
  • :danger
  • :warning
  • :info
  • :light
  • :dark
ui_checkbox_field :primary, checked: true, inline: true, status: :primary
ui_checkbox_field :secondary, checked: true, inline: true, status: :secondary
ui_checkbox_field :success, checked: true, inline: true, status: :success
ui_checkbox_field :danger, checked: true, inline: true, status: :danger
ui_checkbox_field :warning, checked: true, inline: true, status: :warning
ui_checkbox_field :info, checked: true, inline: true, status: :info
ui_checkbox_field :light, checked: true, inline: true, status: :light
ui_checkbox_field :dark, checked: true, inline: true, status: :dark

<div class="form-check-input-primary form-check form-check-inline">
  <input type="checkbox" name="primary" id="primary" value="1" class="form-check-input form-check-input-primary" checked="checked">
  <label class="form-check-label" for="primary">primary</label>
</div>
<div class="form-check-input-secondary form-check form-check-inline">
  <input type="checkbox" name="secondary" id="secondary" value="1" class="form-check-input form-check-input-secondary" checked="checked">
  <label class="form-check-label" for="secondary">secondary</label>
</div>
<div class="form-check-input-success form-check form-check-inline">
  <input type="checkbox" name="success" id="success" value="1" class="form-check-input form-check-input-success" checked="checked">
  <label class="form-check-label" for="success">success</label>
</div>
<div class="form-check-input-danger form-check form-check-inline">
  <input type="checkbox" name="danger" id="danger" value="1" class="form-check-input form-check-input-danger" checked="checked">
  <label class="form-check-label" for="danger">danger</label>
</div>
<div class="form-check-input-warning form-check form-check-inline">
  <input type="checkbox" name="warning" id="warning" value="1" class="form-check-input form-check-input-warning" checked="checked">
  <label class="form-check-label" for="warning">warning</label>
</div>
<div class="form-check-input-info form-check form-check-inline">
  <input type="checkbox" name="info" id="info" value="1" class="form-check-input form-check-input-info" checked="checked">
  <label class="form-check-label" for="info">info</label>
</div>
<div class="form-check-input-light form-check form-check-inline">
  <input type="checkbox" name="light" id="light" value="1" class="form-check-input form-check-input-light" checked="checked">
  <label class="form-check-label" for="light">light</label>
</div>
<div class="form-check-input-dark form-check form-check-inline">
  <input type="checkbox" name="dark" id="dark" value="1" class="form-check-input form-check-input-dark" checked="checked">
  <label class="form-check-label" for="dark">dark</label>
</div>

Label

ui_checkbox_field :check, label: 'My label'

<div class="form-check">
  <input type="checkbox" name="check" id="check" value="1" class="form-check-input">
  <label class="form-check-label" for="check">My label</label>
</div>

Wrapper_html & Label_html

ui_checkbox_field :check, wrapper_html: { title: 'My title'}, label_html: { class: 'test' }

<div title="My title" class="form-check">
  <input type="checkbox" name="check" id="check" value="1" class="form-check-input">
  <label class="form-check-label test" for="check">check</label>
</div>

Simple form

Ui Bibz is compatible with simple form. You can use defaults inputs of Simple Form and defaults inputs of Ui Bibz like ui_checkbox_field. You can use Simple Form input options and Ui Bibz ui_checkbox_field options.

ui_bibz_form_for(@user) do |f|
  ...
  f.input :active, as: :ui_checkbox_field
  ...
end