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.
Radio component
The radio component lets users select one option from a group, with the
checked
prop determining which option is selected by default. Only one radio button can be selected at a time, making it ideal for choosing between mutually exclusive options like contact methods or shipping choices.
<.radio_fieldname="female" value="female" label="female" /> <.radio_field name="male" value="male" label="Male" checked />
Radio group component
The
radio_group
component is ideal for grouping related radio buttons in forms, where only one option can be selected. It enables organized layouts with customizable styling, spacing, and alignment (horizontal or vertical), ensuring a cohesive and user-friendly selection experience.
<!--Default variation is vertical--> <.group_radio name="" id="" space="small" color="danger"> <:radio value="option1">Option 1</:radio> <:radio value="option2">Option 2</:radio> <:radio value="option3">Option 3</:radio> <:radio value="option4" checked>Option 4</:radio> </.group_radio> <.group_radio name="" space="small" variation="horizontal"> <:radio value="option1">Option 1</:radio> <:radio value="option2">Option 2</:radio> <:radio value="option3">Option 3</:radio> <:radio value="option4" checked>Option 4</:radio> </.group_radio>
radio_check helper
The
radio_check
function is designed to streamline the process of managing radio checkboxes with enhanced customization options. By using this function, developers can apply real-time validation on radio 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
radio_check
, you can easily adapt the behavior of checkboxes according to dynamic user inputs, providing a seamless and responsive user experience.
The
radio_check
function is designed to verify selected radio button values in forms by comparing user input against specified options. For list-based fields, like job roles, use
radio_check(:list, {:job, "#{item}"}, @form)
, which checks if the selected value matches the one in the form’s parameters. If the field is not found in parameters, it defaults to comparing with the initial data. This functionality makes
radio_check
adaptable for both real-time validations and pre-set values. For detailed usage, refer to the module documentation.
Note: While you can use radio 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 radio 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]} /> <.group_radio field={@form[:job]} space="small" variation="horizontal" color="misc"> <:radio :for={item <- Ecto.Enum.values(User, :job)} value={"{#item}}" checked={radio_check(:list, {:job, {"{#item}"}}, @form)} > <%= String.capitalize({"{#item}"}) %> </:radio> </.group_radio> <.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> <.toggle_field field={@form[:accepted_terms]} label="Terms" checked={toggle_check(:accepted_terms, @form)} color="primary" phx-debounce="300" /> <.radio_field field={@form[:subscribe]} checked={radio_check(:boolean, :subscribe, @form)} label="Subscribe?" color="danger" value="true" /> <:actions> <.button phx-disable-with="Saving...">Save User</.button> </:actions> </.form_wrapper>