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.
Checkbox component
<.checkbox_field color="white" /> <.checkbox_field color="primary" /> <.checkbox_field color="secondary" /> <.checkbox_field color="dark" /> <.checkbox_field color="success" /> <.checkbox_field color="warning" /> <.checkbox_field color="danger" /> <.checkbox_field color="info" /> <.checkbox_field color="light" /> <.checkbox_field color="misc" /> <.checkbox_field color="dawn" />
Checkbox label class prop
Add your custom classes to checkbox labels
<.checkbox_field label_class="your_classes" />
Checkbox reverse prop
Change the order of the checkbox and label.
<.checkbox_field reverse /> <.checkbox_field />
Checkbox checked prop
This prop sets the checkbox to checked (true).
<.checkbox_field checked />
Checkbox multiple prop
If you want to collect data in the form of arrays within your forms, you can use the
multiple
attribute on the relevant field. This enables the form to accept and output data as arrays, allowing users to submit multiple entries in a single field. When the
multiple
attribute is active, each value entered will be collected into an array, providing a structured format that can streamline data handling, especially when working with multiple selections or repeated input fields.
<.checkbox_field multiple />
Checkbox Group component prop
Keep in mind that the
checkbox_group
component represents a group of checkboxes, so within a form, it will return a list of checked items. In contrast, using the
checkbox
component individually will return a boolean value indicating whether it’s checked or not. Inside
checkbox_group
, the multiple property is set to true by default, meaning it will return a list of selected values and keys. This setup allows users to select multiple options, with each selection stored in a structured list format for easy processing in your form.
Note that in a form, each
checkbox
will return an error specific to that individual checkbox if validation fails. In contrast, with
checkbox_group
, a single error message will be returned for the entire group, rather than for each checkbox individually. This distinction is useful for managing validation feedback depending on whether checkboxes are used individually or as a group.
<.group_checkbox id="" variation="horizontal" name="" space="large" color="danger"> <:checkbox value="10">Label of item 1 in group</:checkbox> <:checkbox value="30">Label of item 2 in group</:checkbox> <:checkbox value="50">Label of item 3 in group</:checkbox> <:checkbox value="60" checked={true}>Label of item 4 in group</:checkbox> </.group_checkbox> <!--Default is vertical variation--> <.group_checkbox id="" name="" space="large" color="info"> <:checkbox value="10">Label of item 1 in group</:checkbox> <:checkbox value="30">Label of item 2 in group</:checkbox> <:checkbox value="50">Label of item 3 in group</:checkbox> <:checkbox value="60" checked={true}>Label of item 4 in group</:checkbox> </.group_checkbox>
checkbox_check helper
The
checkbox_check
function is designed to streamline the process of managing checkbox checkboxes with enhanced customization options. By using this function, developers can apply real-time validation on checkbox 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
checkbox_check
, you can easily adapt the behavior of checkboxes according to dynamic user inputs, providing a seamless and responsive user experience.
The
checkbox_check
function is tailored to handle checkbox selections in forms by checking if a specific value is present in the form’s parameters. For instance, using
checkbox_check(:list, {:hobbies, "reading"}, @form)
tracks whether "reading" is among the selected hobbies. If no user selection is found in the parameters, it defaults to checking the initial form data. This flexibility allows
checkbox_check
to support multiple checkbox options, adapting to dynamic data structures in real-time validations and preset values. See the module documentation for more configuration details.
Note: While you can use checkbox fields individually in your forms, we created a group component to make handling them easier. This group simplifies management within the form, especially for validation and error handling. Otherwise, you can use the standalone checkbox component, but managing and handling errors will be up to the developer.
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 is 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> <hr /> <.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>