Certain props are shared across all form-related components, and you can find them in the form wrapper.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the gallery, allowing for flexible design changes.
Toggle component
The
toggle
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
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_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.
<!--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
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_field color="primary" /> <.toggle_field color="secondary" checked={true} />
toggle_check helper
The
toggle_check
function is designed to streamline the process of managing toggle checkboxes with enhanced customization options. By using this function, developers can apply real-time validation on toggle elements, ensuring they meet specific criteria before further actions are triggered. This function is particularly useful in complex forms where real-time server validation is essential. With
toggle_check
, you can easily adapt the behavior of checkboxes according to dynamic user inputs, providing a seamless and responsive user experience.
Note: For real-time validation with a toggle in a form, be sure to use
phx-debounce=""
with a suitable value. This delay reduces unnecessary server requests, enhancing user experience. Adjust the debounce value to balance responsiveness and performance.
Here is a real-world example provided for you.
<.form_wrapper for={@form} id="user-form" phx-change="validate" phx-submit="save" class="space-y-5" > <.input_field label="Full name" field={@form[:fullname]} /> <.input_field 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>