LoopOS UI v1.1.59.0-release.taskforce.dynamic.form.in.UI.rc2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="lui-checkbox" data-controller="checkbox">
  <label class="lui-checkbox__wrapper">
    <span class="lui-checkbox__input">
      <input type="checkbox" data-checkbox-target="input" data-action="change->checkbox#toggle" class="lui-checkbox__original">
      <span class="lui-checkbox__inner"></span>
    </span>
    <span class="lui-checkbox__label">
      Checkbox Label
      <span class="lui-button__tooltip-wrapper inline-flex w-fit">
        <button class="lui-button lui-button--app--primary lui-button--size-small ml-2" data-controller="lui--button" data-action="click->checkbox#setIndeterminate">
          <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
            Set Indeterminate
          </span>                  
          <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
            <i class="lui-m_icon animate-spin material-symbols-rounded" style="--lui-micon-size: 14px;">
              progress_activity
            </i>
          </div>
        </button></span>
    </span>  </label>
</div>
<div class="lui-checkbox lui-checkbox--checked" data-controller="checkbox">
  <label class="lui-checkbox__wrapper">
    <span class="lui-checkbox__input">
      <input type="checkbox" data-checkbox-target="input" data-action="change->checkbox#toggle" checked="checked" class="lui-checkbox__original">
      <span class="lui-checkbox__inner"></span>
    </span>
    <span class="lui-checkbox__label">
      Checkbox Label
    </span>  </label>
</div>

Inputs::Checkbox

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
10
11
12
<%# Checkbox normal with content contolling indeterminate state with js%>
<%= render LooposUi::Inputs::Checkbox.new(label: "Checkbox Label") do %>
  <%= render LooposUi::Button.new(text: "Set Indeterminate", size: :small, tag_options: {class: "lui-button lui-button--app--primary lui-button--size-small ml-2",data: {action: "click->checkbox#setIndeterminate"}}) %>
<% end %>
<%# Checkbox normal with state controll by params%>
<%= render LooposUi::Inputs::Checkbox.new(
  label: "Checkbox Label",
  help: preview_params[:help],
  error: preview_params[:error],
  state: preview_params[:state]&.to_sym,
) %>

No notes provided.

Param Description Input

—

Helper text below the checkbox

Validation error message

Checkbox

A customizable checkbox component with three states: checked, unchecked, and indeterminate.

Arguments

Property Default Description
label nil Text label displayed next to the checkbox
state nil Initial visual state: :checked, :unchecked, or :indeterminate. When set, overrides value for the checked appearance
name nil Form field name. With submit_via_hidden: true, applied to the hidden input (not the visible checkbox)
value nil HTML value on the checkbox input. Used by checked? when state is not set. Does not affect the submitted value when submit_via_hidden is enabled
required false Shows a required asterisk in the checkbox label
readonly false Disables the checkbox input
form nil form attribute for the submitting input (hidden field when submit_via_hidden is enabled)
data nil Extra data attributes merged onto the checkbox input (e.g. Stimulus actions)
error nil Validation message; adds error styling and hides help when present
help nil Helper text below the checkbox (hidden when error is present)
submit_via_hidden false When true, submits through a single hidden field ("true" / "false") instead of the native checkbox. Avoids duplicate values and ensures false is sent when unchecked
submitted_value nil Initial value of the hidden field when submit_via_hidden is true. Defaults to "false". Use for prefilled answers (e.g. "true" from a saved protocol answer)

States

  • Unchecked: Default state with white background and gray border
  • Checked: Black background with white checkmark
  • Indeterminate: White background with black border and centered black square

Submit behaviour

By default, an unchecked HTML checkbox is not included in form posts. For forms that must always send an explicit boolean (e.g. protocol answers), use submit_via_hidden: true:

  1. A hidden input carries name and the value "true" or "false".
  2. The visible checkbox has no name and is only used for interaction.
  3. The checkbox Stimulus controller updates the hidden value on toggle.

This replaces the older Rails pattern of a separate hidden false field plus a checkbox with the same name, which submits two values when checked.

Usage examples

Basic usage:

<%= render LooposUi::Inputs::Checkbox.new(label: "My Checkbox") %>

Protocol-style boolean (always submit true or false):

<%= render LooposUi::Inputs::Checkbox.new(
  name: "protocol_answers[0][value]",
  submit_via_hidden: true,
  submitted_value: saved_answer ? "true" : "false",
  label: "Accept terms",
  state: saved_answer ? :checked : :unchecked,
  form: "protocol_form",
) %>

Programmatically changing states:

<%= render LooposUi::Inputs::Checkbox.new(label: "My Checkbox") do |checkbox| %>
  <button data-action="click->checkbox#check">Check</button>
  <button data-action="click->checkbox#uncheck">Uncheck</button>
  <button data-action="click->checkbox#setIndeterminate">Indeterminate</button>
<% end %>

JavaScript methods

Method Description
check() Sets checkbox to checked state
uncheck() Sets checkbox to unchecked state
setIndeterminate() Sets checkbox to indeterminate state
toggle() Updates visual state and syncs the hidden field when submit_via_hidden is enabled
submitForm() Submits the closest ancestor form (use via data-action when needed)

The controller calls syncHiddenInput() on connect and on every toggle when a hidden target is present.