Checkbox Field(ui_checkbox_field)

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]
  • options[hash]<default: {}>
  • html_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:
  • state[symbol](:disabled, :active)(use component state method)
  • value[boolean/string/integer]
  • label[string]
  • intermediate[boolean]
  • inline[boolean]
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • action[string](use component stimulus-options method)
  • target[string](use component stimulus-options method)

Examples

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

Checkbox

ui_checkbox_field :custom_check

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

Indeterminate

ui_checkbox_field "Indeterminate", indeterminate: true

<div class="custom-control custom-checkbox">
  <input type="hidden" name="Indeterminate" id="Indeterminate-hidden" value="0">
  <input type="checkbox" name="Indeterminate" id="Indeterminate" value="1" indeterminate="indeterminate" class="custom-control-input">
  <label class="custom-control-label" for="Indeterminate">Indeterminate</label>
</div>

Inline

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

<div class="custom-control custom-checkbox custom-control-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="custom-control-input" checked="checked">
  <label class="custom-control-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 custom-control custom-checkbox">
  <input type="hidden" name="state_1" id="state_1-hidden" value="0">
  <input type="checkbox" name="state_1" id="state_1" value="true" disabled="disabled" class="custom-control-input">
  <label class="custom-control-label" for="state_1">choice 1</label>
</div>
<div class="disabled custom-control custom-checkbox">
  <input type="hidden" name="state_2" id="state_2-hidden" value="0">
  <input type="checkbox" name="state_2" id="state_2" value="1" disabled="disabled" class="custom-control-input" checked="checked">
  <label class="custom-control-label" for="state_2">choice 2</label>
</div>

Label

ui_checkbox_field :check, label: 'My label'

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

Contents