Switch

MishkaSwitch maps the Chelekom switch API onto Mob's native Toggle widget. The switch animates, reports its state to accessibility services and uses the platform's own switch size.

The screen owns the state. On Android the Toggle renders whatever checked says and reports a change through on_change, so nothing moves until your screen writes the new value back. The value arrives in handle_info/2 as {:change, tag, boolean}.

When you set label, the component builds a row with the label first and the switch at the trailing edge. The component builds this row itself, so the label shows on both platforms.

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

mix mishka.ui.gen.mob switch

The generator registers the tag, so you can use it in ~MOB markup. It also copies the shared Event module. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaSwitch>. Without a prefix, the tag is <Switch>. To generate with the prefix, run:

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

Set label to put text before the switch. The switch sits at the trailing edge of the row. When the user taps it, the screen receives {:change, tag, boolean} and assigns the value. In the showcase app, two switches share one card and a line under them reports both states.

Switch with a label

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. Flip a switch and the screen state follows.

<MishkaSwitch label="Wi-Fi" checked={@wifi} on_change={:wifi_changed} />

def handle_info({:change, :wifi_changed, on?}, socket) do
  {:noreply, assign(socket, :wifi, on?)}
end

color tints the thumb and track_color tints the track, so you set the two separately. Pass track_color as an ARGB integer. Both props apply on Android only, because iOS paints the system accent.

Switch with custom colors

LTR RTL

Preview

Show the whole example Show less

<MishkaSwitch
  label="Violet"
  checked={@on}
  color={0xFFFDE68A}
  track_color={0xFF7C3AED}
  on_change={:tint}
/>

disabled leaves the handler off, so the switch cannot report a change. The switch still looks enabled, because Mob's Toggle does not pass the disabled state to the platform widget. On Android it cannot move. On iOS the native switch still moves when touched and reports nothing. Add a muted label if the difference needs to show.

Disabled switch

LTR RTL

Preview

Show the whole example Show less

<MishkaSwitch label="Locked on" checked={true} disabled={true} />

The built-in label always comes first and the switch always comes last. To put the switch first, leave label out and place the switch in a Row beside a Text.

This example routes the change through handle_change/3, the callback the showcase app uses. In your own screen, handle {:change, :airplane, on?} in handle_info/2, as in the first example.

Switch without a label

LTR RTL

Preview

Show the whole example Show less

# Leading switch, which the label prop cannot produce:
<Row>
  <MishkaSwitch checked={@on} on_change={:airplane} />
  <Text text="Airplane mode" />
</Row>

def handle_change(:airplane, on?, socket),
  do: Mob.Socket.assign(socket, :airplane, on?)

The native Toggle has fixed metrics. Material's Compose Switch is 52 dp wide and 32 dp tall, with a 24 dp thumb when on, and no prop at any layer of the stack changes that. When a design specifies its own track and thumb sizes, set render={:box}. The component then draws the switch from a track Box that holds a thumb Box.

<MishkaSwitch
  render={:box}
  checked={@wifi?}
  on_toggle={:wifi_tapped}
  track_width={46}
  track_height={28}
  track_radius={14}
  thumb_size={22}
/>

A drawn switch reports a tap through on_toggle, with no value, so your screen flips checked itself. on_change is not read in this mode. disabled still removes the handler, and a drawn switch without a handler is inert on both platforms. color and track_color become backgrounds, so they work on iOS too.

The native switch stays the default, so existing switches look the same. Choose the drawn mode only when you need exact geometry, because it gives up some things the native switch has:

• No ripple or press state. The track paints the same before and after a touch.
• No thumb animation. The thumb snaps between its two positions instead of sliding.
• No platform accessibility semantics. A drawn switch is announced as an unlabeled tappable region, so set label (the label row is real text) and prefer the native switch where accessibility matters more than geometry.
• One thumb size. The native thumb grows from 16 dp to 24 dp when on, while the drawn thumb is thumb_size in both states.

Props for render box

The drawn rendering reads these props. The native rendering ignores them.

The native switch sends {:change, tag, boolean} to the screen through on_change. Handle it in handle_info/2 and assign the value:

def handle_info({:change, :wifi_changed, on?}, socket) do
  {:noreply, Mob.Socket.assign(socket, :wifi?, on?)}
end

A drawn switch (render={:box}) sends {:tap, tag} through on_toggle. The message has no value, so the screen flips the state:

def handle_info({:tap, :wifi_tapped}, socket) do
  {:noreply, Mob.Socket.assign(socket, :wifi?, !socket.assigns.wifi?)}
end

• name, value, unchecked_value, form and required are not ported. They exist to submit an <input> inside an HTML form, and a phone has no form post.
• id is not ported. On the web it anchors aria-* relationships in the DOM.
• readonly and disabled become one prop. Both omit the handler.

• Headless Switch, the web component this one ports.
• Mob Checkbox, a box that can also be mixed.
• Mob Radio Group, a set of options where you choose one.
• Mob Segmented Control, a joined strip with one selection.
• Mob components, the full list of native components.