Hakumi :: Rails ViewComponents

Basic

Basic usage of switch.

Code

<%= render Hakumi::Switch::Component.new %>

Sizes

Small, middle, and large switches.

Code

<%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
  <%= render Hakumi::Switch::Component.new(size: :small) %>
  <%= render Hakumi::Switch::Component.new %>
  <%= render Hakumi::Switch::Component.new(size: :large) %>
<% end %>

Disabled & Loading

Disabled and loading states. Use the API to toggle states dynamically.

Toggle disabled state via API:

Toggle loading state via API:

Code

<%= render Hakumi::Space::Component.new(size: :large, direction: :vertical, align: :start) do %>
  <%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
    <%= render Hakumi::Switch::Component.new(disabled: true) %>
    <%= render Hakumi::Switch::Component.new(checked: true, disabled: true) %>
    <%= render Hakumi::Switch::Component.new(loading: true) %>
    <%= render Hakumi::Switch::Component.new(checked: true, loading: true) %>
  <% end %>

  <%= render Hakumi::Space::Component.new(size: :middle, direction: :vertical, align: :start) do %>
    <p style="margin-bottom: 8px;">Toggle disabled state via API:</p>
    <%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
      <%= render Hakumi::Switch::Component.new(
        id: "switch-disabled-demo",
        checked: true,
        disabled: true
      ) %>
      <%= render Hakumi::Button::Component.new(
        size: :small,
        onclick: "document.getElementById('switch-disabled-demo').hakumiComponent.api.toggleDisabled()"
      ) do %>
        Toggle Disabled
      <% end %>
    <% end %>
  <% end %>

  <%= render Hakumi::Space::Component.new(size: :middle, direction: :vertical, align: :start) do %>
    <p style="margin-bottom: 8px;">Toggle loading state via API:</p>
    <%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
      <%= render Hakumi::Switch::Component.new(
        id: "switch-loading-demo",
        checked: true
      ) %>
      <%= render Hakumi::Button::Component.new(
        size: :small,
        onclick: "document.getElementById('switch-loading-demo').hakumiComponent.api.toggleLoading()"
      ) do %>
        Toggle Loading
      <% end %>
    <% end %>
  <% end %>
<% end %>

With labels

Checked and unchecked labels.

On Off YES NO

Enabled Disabled Active Inactive

Code

<%= render Hakumi::Space::Component.new(size: :large, direction: :vertical, align: :start) do %>
  <%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
    <%= render Hakumi::Switch::Component.new(
      checked_text: "On",
      unchecked_text: "Off"
    ) %>

    <%= render Hakumi::Switch::Component.new(
      checked: true,
      checked_text: "YES",
      unchecked_text: "NO"
    ) %>
  <% end %>

  <%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
    <%= render Hakumi::Switch::Component.new(
      checked: true,
      checked_text: "Enabled",
      unchecked_text: "Disabled"
    ) %>

    <%= render Hakumi::Switch::Component.new(
      checked_text: "Active",
      unchecked_text: "Inactive"
    ) %>
  <% end %>

  <%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
    <%= render Hakumi::Switch::Component.new(
      checked: true,
      checked_text: render(Hakumi::Icon::Component.new(name: :check)),
      unchecked_text: render(Hakumi::Icon::Component.new(name: :close))
    ) %>
  <% end %>
<% end %>

Switch API

Prop	Type	Default	Description
`checked`	`Boolean`	`false`	Controlled checked state.
`default_checked`	`Boolean`	`false`	Initial checked state.
`disabled`	`Boolean`	`false`	Disable switch.
`loading`	`Boolean`	`false`	Show loading state and disable switch.
`size`	`Symbol`	`:middle`	Switch size (:small, :middle, :large).
`checked_text`	`String or Slot`	`-`	Content shown when checked.
`unchecked_text`	`String or Slot`	`-`	Content shown when unchecked.
`standalone`	`Boolean`	`true`	Render without form item wrapper.
`label`	`String`	`-`	Form label when standalone is false.
`caption`	`String`	`-`	Form caption when standalone is false.

Switch JavaScript API (element.hakumiComponent.api)

Prop	Type	Default	Description
`setChecked(checked)`	`Function`	`-`	Set checked state (true/false).
`setDisabled(disabled)`	`Function`	`-`	Set disabled state (true/false).
`setLoading(loading)`	`Function`	`-`	Set loading state (true/false).
`isChecked()`	`Function`	`-`	Return current checked state.
`isDisabled()`	`Function`	`-`	Return current disabled state.
`isLoading()`	`Function`	`-`	Return current loading state.
`toggleChecked()`	`Function`	`-`	Toggle checked state.
`toggleDisabled()`	`Function`	`-`	Toggle disabled state.
`toggleLoading()`	`Function`	`-`	Toggle loading state.
`check()`	`Function`	`-`	Set checked to true.
`uncheck()`	`Function`	`-`	Set checked to false.
`enable()`	`Function`	`-`	Set disabled to false.
`disable()`	`Function`	`-`	Set disabled to true.