Mishka
Chelekom

Toggle field

v0.0.10

v0.0.10StableComponentStatelessApache-2.0
Installation mix mishka.ui.gen.component toggle_field
Source View Source

Toggle component

The toggle_field component is a switch-like input used to enable or disable a setting or feature. It provides a clear and interactive way for users to select between two states, such as "on" and "off" or "enabled" and "disabled." With its simple, intuitive design, the toggle_field is often used for settings, preferences, or activating specific features in applications. It enhances the user experience by offering a quick and clear method of making binary choices.

Toggle component

heex
<.toggle_field color="base" />
<.toggle_field color="danger" />
<.toggle_field color="dark" />
<.toggle_field color="warning" />
<.toggle_field color="natural" />
<.toggle_field color="white" />
<.toggle_field color="success" />
<.toggle_field color="silver" />
<.toggle_field color="misc" />
<.toggle_field color="dawn" />
<.toggle_field color="info" />
<.toggle_field color="primary" />
<.toggle_field color="secondary" />

Toggle rounded prop

The rounded prop is a versatile feature that controls the corner radius of toggle elements, allowing you to adjust how rounded or circular the toggle appears. It offers predefined sizes such as extra_small, small, medium, large, extra_large, and full, each applying different levels of rounding to both the toggle base and circle. For instance, extra_small gives subtle rounded corners, while full creates a completely circular toggle. By default, the prop is set to full, ensuring a polished and modern look. Additionally, you can specify a custom value to achieve unique designs if needed, making it a flexible option for styling toggles to fit various design contexts.

Toggle rounded prop

heex
<!--Default is full-->
<.toggle_field rounded="extra_small" />
<.toggle_field rounded="small" />
<.toggle_field rounded="medium" />
<.toggle_field rounded="large" />
<.toggle_field rounded="extra_large" />
<.toggle_field rounded="full" />

Toggle checked prop

The checked prop in the toggle_field component determines whether the toggle is initially set to "on" or "off". When the checked prop is set to true, the toggle will be in the "on" position by default. This prop allows you to control the initial state of the toggle, making it useful for settings or features that should be enabled when the form or page is first loaded.

Toggle checked prop

heex
<.toggle_field color="primary" />
<.toggle_field color="secondary" checked={true} />

toggle_check helper

Here is a real-world example provided for you.

toggle_check helper

What is your hobbies?

heex
<.form_wrapper
    for={@form}
    id="user-form"
    phx-change="validate"
    phx-submit="save"
    class="space-y-5"
  >
    <.input label="Full name" field={@form[:fullname]} />

    <.input
      field={@form[:job]}
      type="select"
      label="Choose your Job"
      options={Ecto.Enum.values(User, :job)}
    />

    <.h3>What are your hobbies?</.h3>

    <.group_checkbox variation="horizontal" field={@form[:hobbies]} color="danger">
      <:checkbox
        value="reading"
        checked={checkbox_check(:list, {:hobbies, "reading"}, @form)}
      >
        Reading
      </:checkbox>
      <:checkbox
        value="programming"
        checked={checkbox_check(:list, {:hobbies, "programming"}, @form)}
      >
        Programming
      </:checkbox>
      <:checkbox
        value="photography"
        checked={checkbox_check(:list, {:hobbies, "photography"}, @form)}
      >
        Photography
      </:checkbox>
    </.group_checkbox>

    <.toggle_field
      field={@form[:accepted_terms]}
      label="Terms"
      checked={toggle_check(:accepted_terms, @form)}
      color="primary"
      phx-debounce="300"
    />

    <:actions>
      <.button phx-disable-with="Saving...">Save User</.button>
    </:actions>
  </.form_wrapper>