LoopOS UI v1.1.26.2

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
32
33
34
35
36
<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
      <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" data-lui--button-target="text">
          Set Indeterminate
        </span>
      </button>
    </span>
  </label>
</div>
<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>
  </label>
</div>

Inputs::Checkbox

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
<%# 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", state: params[:state]&.to_sym)%>

No notes provided.

Param Description Input

—

Checkbox

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

Arguments

Property Default Description
label nil Text label to be displayed next to the checkbox
state nil Initial checkbox state. Possible values: :checked, :unchecked, :indeterminate
name nil Name of input field
value nil Value of input field

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

Usage Example

Basic usage:

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

Programmatically changing states:

<%= render LooposUi::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