Segmented control

MishkaSegmentedControl draws one continuous track with the selection sitting inside it. The selection can never be empty. Tapping the selected segment does nothing, and select/2 states that rule: it returns the tapped id. When value matches no segment, the control selects the first one.

A toggle group can clear its selection, so use Mob Toggle Group when an empty selection is meaningful. A Mob Radio Group also keeps one option selected, but it draws separate circles instead of a joined strip.

Write segments as <MishkaSegmentedControlOption> children, the native version of Chelekom's <:option> slot. Each tag takes id, label and disabled. When the segments come from data, option/3 builds the identical node. The control keeps the handler, so a segment has no on_* prop of its own.

Segments are sized by their labels, and the track hugs them. Equal widths need layout weight, which Compose implements and Mob's iOS mapping does not, so a strip that looked right on Android would collapse on iOS. Set fill_width={true} to make the track span its parent. The segments still sit together at the leading edge. On Android, segment_weight gives the segments equal widths.

The headless original ships no colors or spacing, and there is no stylesheet here, so every visual is a prop with a default. A disabled selected segment is gray, without the accent color.

Give the control an id to name each segment for device tests. With id="view", the :week segment is tagged view-week-selected or view-week-idle. Selection is shown by fill color alone, and color is not in the accessibility tree, so these tags are the only thing a device test can read.

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

mix mishka.ui.gen.mob segmented_control

The generator registers the <SegmentedControl> tag so you can use it in ~MOB markup. It also 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 <MishkaSegmentedControl>. Without a prefix the tag is <SegmentedControl>.

To generate it with that prefix, run:

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

Tapping the selected segment is a no-op, so the selection cannot be cleared. select/2 states the rule: it always returns the tapped id, so the next value is never nil. A toggle group would clear the selection here.

Segmented control with one segment always selected

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. A segmented control always has exactly one selection.

# Segments are slot tags, like Chelekom's <:option>. Each one carries its
# id and its label; the control keeps the handler.
<MishkaSegmentedControl value={@view} on_change={:view} id="view">
  <MishkaSegmentedControlOption id={:day} label="Day" />
  <MishkaSegmentedControlOption id={:week} label="Week" />
  <MishkaSegmentedControlOption id={:month} label="Month" />
</MishkaSegmentedControl>

# select/2 is the rule, and it is deliberately boring: always the tapped
# id. A toggle group would clear here; a radio group would keep. Neither
# is what a segmented control does.
def handle_info({:tap, {:view, id}}, socket) do
  next = MishkaSegmentedControl.select(socket.assigns.view, id)
  {:noreply, Mob.Socket.assign(socket, :view, next)}
end

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

Set label to put a heading above the strip.

Segmented control with a label

LTR RTL

Preview

Show the whole example Show less

<MishkaSegmentedControl label="THEME" value={@theme} on_change={:theme}>
  <MishkaSegmentedControlOption id={:light} label="Light" />
  <MishkaSegmentedControlOption id={:dark} label="Dark" />
  <MishkaSegmentedControlOption id={:system} label="System" />
</MishkaSegmentedControl>

When the segments come from a list, option/3 builds the same node that the tag does, so the control cannot tell the two apart. Use the tag when you write the segments out and the function when you map over a list. text_size sets the size of the labels.

Segmented control segments from data

LTR RTL

Preview

Show the whole example Show less

# Written as a LIST here rather than as <MishkaSegmentedControlOption>
# tags, because the segments come from data. option/3 builds exactly the
# node the tag does — %{type: :mishka_segmented_control_option, props:
# %{id:, label:, disabled:}} — so the two forms are interchangeable. Use
# the tag when you are writing the segments out, the function when you
# are mapping over a list.
@roles [{:owner, "Owner"}, {:admin, "Admin"}, {:member, "Member"}]

<MishkaSegmentedControl value={@role} on_change={:role} text_size={:sm}>
  {Enum.map(@roles, fn {id, label} -> option(id, label) end)}
</MishkaSegmentedControl>

The strip is as wide as its labels unless you set fill_width. With fill_width={true} the track spans its parent. The segments stay sized by their labels either way.

Hugging and full-width segmented control

LTR RTL

Preview

Show the whole example Show less

<MishkaSegmentedControl fill_width={true} value={@v}>
  <MishkaSegmentedControlOption id={:s} label="S" />
  <MishkaSegmentedControlOption id={:m} label="M" />
  <MishkaSegmentedControlOption id={:l} label="L" />
</MishkaSegmentedControl>

Like the headless original, the control ships no look of its own, so every visual is a prop. color fills the selected segment, background paints the track, and corner_radius, segment_radius and padding shape them.

Styled segmented control

LTR RTL

Preview

Show the whole example Show less

<MishkaSegmentedControl
  value={@v}
  color={0xFF7C3AED}
  background={0xFFEFEDF7}
  corner_radius={20}
  segment_radius={17}
  padding={12}
>
  <MishkaSegmentedControlOption id={:day} label="Day" />
  <MishkaSegmentedControlOption id={:week} label="Week" />
  <MishkaSegmentedControlOption id={:month} label="Month" />
</MishkaSegmentedControl>

Put disabled on a segment tag to disable one segment. Put it on the control to disable every segment. A locked control is gray, without the accent color.

Disabled segmented control

LTR RTL

Preview

Show the whole example Show less

# One segment off — disabled sits on the option tag.
<MishkaSegmentedControl value={@v} on_change={:pick}>
  <MishkaSegmentedControlOption id={:inbox} label="Inbox" />
  <MishkaSegmentedControlOption id={:archive} label="Archive" disabled={true} />
</MishkaSegmentedControl>

# The whole control off — disabled on the control cascades to every one.
<MishkaSegmentedControl disabled={true} value={@v}>…</MishkaSegmentedControl>

More text and layout props

These props leave the control as it was when you do not set them. Three notes help when you pin sizes:

• Padding applies before width and height, so height measures the box inside the padding. A 36 pt track with a 3 pt inset is height: 30, track_padding: 3, and a 28 pt segment inside it is segment_height: 28 with no vertical padding.
• width and height take plain numbers. Tokens are not resolved for them. Never pass a negative padding, because it throws on the native side.
• shadow and selected_shadow take a string in CSS box-shadow order, dx dy blur spread #AARRGGBB, with further layers after a pipe. A numeric text_size is in sp and stays put when the user scales their type.

Your screen receives {:tap, {tag, option_id}} in handle_info/2 from on_change. The control pairs its tag with the id of the tapped segment, so one clause serves every segment:

def handle_info({:tap, {:view, id}}, socket) do
  next = MishkaSegmentedControl.select(socket.assigns.view, id)
  {:noreply, Mob.Socket.assign(socket, :view, next)}
end

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

• name is not ported. It is HTML form plumbing.
• The *_class attributes are not ported. Every visual is a prop instead.

• Headless Segmented Control, the web component this one ports.
• Mob Radio Group, a labeled set of circles with one selection.
• Mob Toggle Group, a strip whose selection can be empty.
• Mob Tabs, for switching between views.
• Mob components, the full list of native components.