Switch Field(ui_switch_field)Ui Bibz Logo

UiBibz::Ui::Core::Forms::Choices::SwitchField

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch.

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_switch_field name, options, html_options 

 # or by block 
 ui_switch_field options, html_options do 
   name 
 end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • checked[boolean]
  • controller[string](use component stimulus-options method)
  • inline[boolean]
  • state[symbol](:disabled, :active)(use component state method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)

Html Options

The specific html options for this component are:
  • checked[boolean]
  • readonly[boolean]

Examples

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

Switch Field

ui_switch_field 'example_basic'

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

Inline

ui_switch_field "example_inline", inline: true
ui_switch_field "example_inline_2", inline: true, checked: true

<div class="custom-control custom-switch custom-control-inline">
  <input type="hidden" name="example_inline" id="example_inline-hidden" value="0">
  <input type="checkbox" name="example_inline" id="example_inline" value="1" class="custom-control-input">
  <label class="custom-control-label" for="example_inline">example_inline</label>
</div>
<div class="custom-control custom-switch custom-control-inline">
  <input type="hidden" name="example_inline_2" id="example_inline_2-hidden" value="0">
  <input type="checkbox" name="example_inline_2" id="example_inline_2" value="1" class="custom-control-input" checked="checked">
  <label class="custom-control-label" for="example_inline_2">example_inline_2</label>
</div>

State

ui_switch_field "example_state", state: :active
ui_switch_field "example_state_2", state: :disabled

<div class="active custom-control custom-switch">
  <input type="hidden" name="example_state" id="example_state-hidden" value="0">
  <input type="checkbox" name="example_state" id="example_state" value="1" class="custom-control-input">
  <label class="custom-control-label" for="example_state">example_state</label>
</div>
<div class="disabled custom-control custom-switch">
  <input type="hidden" name="example_state_2" id="example_state_2-hidden" value="0">
  <input type="checkbox" name="example_state_2" id="example_state_2" value="1" disabled="disabled" class="custom-control-input">
  <label class="custom-control-label" for="example_state_2">example_state_2</label>
</div>

Checked

ui_switch_field "example_checked", checked: true

<div class="custom-control custom-switch"><input type="hidden" name="example_checked" id="example_checked-hidden" value="0">
  <input type="checkbox" name="example_checked" id="example_checked" value="1" class="custom-control-input" checked="checked">
  <label class="custom-control-label" for="example_checked">example_checked</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_switch_field. You can use Simple Form input options and Ui Bibz ui_switch_field options.

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