Toggle

Mob has three controls that mean on or off, and the port keeps them apart on purpose. Switch is a setting that wraps the platform's switch widget, and it belongs beside a label in a settings list. Chip is a filter, one of a set you pick from, and it is pill-shaped. Toggle is a pressed button, usually one of several in a toolbar, that holds a binary state about the thing you are editing and not about the app.

They look different so users can tell them apart. A switch slides, a chip is a pill, and a toggle is a square-cornered button that looks pushed in.

The screen owns the state. Pass pressed from the screen, and flip it when {:tap, tag} arrives. A lone toggle owns one boolean, so its tag needs no id.

Toggle is a box around a text label, so every dimension it draws is a prop. If a design wants a 46 by 28 pressed button, you set that size and get it. Switch cannot be resized this way, because it wraps a native widget with a fixed size.

Styling

As with the headless component, Toggle ships no look. There is no stylesheet on a phone, so every visual decision is a prop. The defaults only keep an unstyled toggle legible. A pressed toggle uses color and text_color, and an idle one uses background and label_color.

fill_width defaults to false, so a toggle is as wide as its label and a row of toggles is possible. Set it to true for a toggle that should span its container.

Size and padding

Padding is applied before width and height, so those measure the box inside the padding. height: 28, padding: 8 is 44 tall on screen. Pin the outer size by pairing the two, or drop the padding on the axis you pin. width and height take plain numbers, not tokens. Never compute a negative padding, because it throws on the native side.

toggle(label: "W", width: 46, height: 28, padding: 0, border_width: 0,
       corner_radius: 8, text_size: 11.5, font_weight: :semibold)

text_size also takes a raw number in sp. Only the token form is multiplied by the theme's type scale, so a number stays put when the user scales their type.

Shadows

shadow is a string in CSS box-shadow order, dx dy blur spread #AARRGGBB, with further layers after a vertical bar. There is one prop and not a pressed and idle pair, because the screen already knows which state it asked for and can pass the matching shadow. A bridge without shadow support ignores it.

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

mix mishka.ui.gen.mob toggle

The generator registers the tag, so you can use it in ~MOB markup. It also copies the shared Event module that the component calls. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaToggle>. Without a prefix, the tag is <Toggle>.

Each button holds its own pressed state, and the screen keeps one boolean per toggle. The code shows one toggle and the handler that flips it. The app draws Bold, Italic and Underline side by side.

Toggles in a formatting toolbar

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. Each toggle holds its own pressed state.

<MishkaToggle label="Bold" pressed={@bold?} on_change={:bold} />

# A lone toggle owns one boolean, so its tag needs no id.
def handle_info({:tap, :bold}, socket) do
  {:noreply, Mob.Socket.assign(socket, :bold?, not socket.assigns.bold?)}
end

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

A toggle is as wide as its text, because it is a button and not a banner. Add fill_width={true} when you want one to span the parent.

A toggle hugs its label

LTR RTL

Preview

Show the whole example Show less

<MishkaToggle label="Pressed" pressed={true} />
<MishkaToggle label="A much longer label" />

The toggle ships no look, so every visual is a prop. This one is pressed in violet, with a corner radius of 20, padding of 12 and no border.

Style a toggle with props

LTR RTL

Preview

Show the whole example Show less

<MishkaToggle
  label="Violet"
  pressed={true}
  color={0xFF7C3AED}
  corner_radius={20}
  padding={12}
  border_width={0}
/>

A disabled toggle is inert, but it still shows whether it is pressed. A pressed one stays filled and turns gray, so locked on and locked off do not look the same.

Disabled toggle

LTR RTL

Preview

Show the whole example Show less

<MishkaToggle label="Locked on" pressed={true} disabled={true} />

A pressed toggle differs from an idle one by its fill color alone, and color is not in the accessibility tree. The id suffix is how a device test reads the state.

on_change sends {:tap, tag} to the screen. Flip the boolean in handle_info/2:

def handle_info({:tap, :bold}, socket) do
  {:noreply, Mob.Socket.assign(socket, :bold?, not socket.assigns.bold?)}
end

• name, value, unchecked_value and form are not ported, because they are HTML form plumbing.
• The *_class attributes are not ported. Every visual is a prop instead.

• Headless Toggle, the web component this one ports.
• Mob Toggle Group, toggle buttons that share one selection.
• Mob Switch, an on or off setting.
• Mob Chip, a compact, selectable label.
• Mob Toolbar, a strip of related controls that can hold toggles.
• Mob components, the full list of native components.