Radio group

MishkaRadioGroup builds on the Mob Radio component and does not redraw the circle, so a single radio and a grouped one are the same control. The group adds three things a lone radio cannot know about itself: which option is selected (value), a group label, and a group-wide disabled that applies to every option.

On the web, a shared name makes the browser allow one selected radio. Here the group does it. Every option reports the same on_change tag with its own id added, and select/2 returns the next value. Tapping the selected option keeps it selected, unlike a checkbox.

Write options as <MishkaRadioGroupOption> children, the native version of the Phoenix component's <:radio> slots. Each option takes id, label and disabled. When the options come from data, option/3 builds the identical node, so you can mix the tag and the function.

A vertical group is the default. Each radio fills the width, so the label is part of the tap target. In a horizontal group each radio hugs its label. A radio that filled the width would take the whole row and push its siblings off screen.

Give the group an id to name each option for device tests. With id="plan", the :pro ring is tagged plan-pro-selected or plan-pro-empty.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob radio_group

The generator registers the <RadioGroup> tag so you can use it in ~MOB markup. It also generates the Radio component, because the group draws its options with it, and copies the shared Event support module. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaRadioGroup>. Without a prefix the tag is <RadioGroup>.

To generate it with that prefix, run:

mix mishka.ui.gen.mob radio_group --module-prefix mishka_

Give the group a label, a value and one on_change tag. Each option sends {:tap, {tag, option_id}}, so one handler serves the whole group. select/2 computes the next value.

Labeled radio group

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. One handler serves every option in the group.

<MishkaRadioGroup label="Plan" value={@plan} on_change={:plan} id="plan">
  <MishkaRadioGroupOption id={:free} label="Free" />
  <MishkaRadioGroupOption id={:pro} label="Pro" />
  <MishkaRadioGroupOption id={:team} label="Team" />
</MishkaRadioGroup>

# Every option reports the SAME tag widened with its own id — that is what
# replaces the browser's shared `name`, and why one clause is enough.
def handle_info({:tap, {:plan, id}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :plan, MishkaRadioGroup.select(socket.assigns.plan, id))}
end

def handle_info(_msg, socket), do: {:noreply, socket}

Set orientation to :horizontal to lay the options in a row. space sets the gap between them. Each option then sizes to its label.

Horizontal radio group

LTR RTL

Preview

Show the whole example Show less

<MishkaRadioGroup value={@size} orientation={:horizontal} space={18} on_change={:size}>
  <MishkaRadioGroupOption id={:s} label="S" />
  <MishkaRadioGroupOption id={:m} label="M" />
  <MishkaRadioGroupOption id={:l} label="L" />
</MishkaRadioGroup>

Put disabled on an option tag to disable that option. Put it on the group to disable every option at once.

Disabled radio group options

LTR RTL

Preview

Show the whole example Show less

<MishkaRadioGroup value={@plan} on_change={:plan}>
  <MishkaRadioGroupOption id={:free} label="Free" />
  <MishkaRadioGroupOption id={:team} label="Team" disabled={true} />
</MishkaRadioGroup>

<MishkaRadioGroup disabled={true} value={@plan} on_change={:plan}>
  <MishkaRadioGroupOption id={:free} label="Free" />
</MishkaRadioGroup>

color and size pass through to every option in the group.

Radio group color and size

LTR RTL

Preview

Show the whole example Show less

<MishkaRadioGroup value={@plan} color={0xFF7C3AED} size={26} on_change={:plan}>
  <MishkaRadioGroupOption id={:free} label="Free" />
  <MishkaRadioGroupOption id={:pro} label="Pro" />
</MishkaRadioGroup>

Written out, an option is a tag. Built from data, it is option/3, which produces the same node, so the two forms mix freely. Use the tag when you list the options by hand and the function when they come from a list.

Radio group options from a list

LTR RTL

Preview

Show the whole example Show less

# option/3 builds exactly what <MishkaRadioGroupOption> builds:
# %{type: :mishka_radio_group_option, props: %{id:, label:, disabled:}}.
# Use the tag when you are listing the options out, the function when
# they come from data — a comprehension over tiers cannot be markup.
<MishkaRadioGroup label="Tier" value={@tier} on_change={:tier}>
  {Enum.map(@tiers, fn {id, label} -> option(id, label) end)}
</MishkaRadioGroup>

Your screen receives {:tap, {tag, option_id}} in handle_info/2 from on_change. Every option reports the same tag with its own id, so one clause serves the group:

def handle_info({:tap, {:plan, id}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :plan, MishkaRadioGroup.select(socket.assigns.plan, id))}
end

def handle_info(_msg, socket), do: {:noreply, socket}

• name, required and form are not ported. They are HTML form plumbing.
• The web id and the *_class attributes are not ported. The Mob id prop is a prefix for native test tags.
• readonly and disabled become one prop, disabled.

• Headless Radio Group, the web component this one ports.
• Mob Radio, the single option the group draws.
• Mob Segmented Control, a joined strip with one selection.
• Mob Checkbox Group, for choosing any number of options.
• Mob components, the full list of native components.