Mishka
Chelekom

Radio field

v0.0.10

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

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 component

heex
<.radio_field name="female" value="female" label="female" />

<.radio_field name="male" value="male" label="Male" checked />

Radio group component

The group_radio 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.

Radio group component

heex
<!--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

Here is a real-world example provided for you.

radio_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]} />

    <.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(to_string(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>