Checkbox

Mob has no checkbox widget, because its Toggle is a switch. MishkaCheckbox builds the indicator itself: a small rounded Box that holds a drawn mark, beside the label, in one tappable row.

A checkbox has three states. An empty box is unchecked, a tick is checked and a dash is indeterminate. While indeterminate is set, it wins over checked, the way aria-checked="mixed" overrides the checked flag on the web. The states differ by shape as well as color, so people who cannot tell the colors apart can still read them.

The screen owns the state. A tap sends {:tap, tag} to handle_info/2, and the screen decides the next checked and indeterminate values. toggle/1 returns the next {checked?, indeterminate?} for a tap. A mixed checkbox resolves to checked, so tapping a select all parent selects everything.

The mark is drawn with canvas lines instead of a text glyph. A glyph sits on its text baseline and rides high in a small box. Drawn lines have no text metrics, so the mark stays centered at any size on both platforms.

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

mix mishka.ui.gen.mob checkbox

The generator registers the component's 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 <MishkaCheckbox>. Without a prefix the tag is <Checkbox>. To generate the prefixed version, run:

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

A checkbox is one tappable row made of the box and its label. Tapping anywhere on the row sends {:tap, tag} to the screen with the on_toggle tag, and the screen flips checked.

Checked and unchecked checkbox

LTR RTL

Preview

Show the whole example Show less

<MishkaCheckbox label="Remember me" checked={@remember?} on_toggle={:remember} />

A parent checkbox goes indeterminate when only some of its children are checked. Set indeterminate on the parent and it draws a dash. Call toggle/1 to get the next state. A tap on a mixed parent resolves to checked, so it selects everything.

Select all checkbox with an indeterminate state

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. The parent goes mixed when only some children are ticked.

<MishkaCheckbox label="All" checked={all?} indeterminate={some?} on_toggle={:all} />

# tapping a mixed parent selects everything
{checked?, _} = MishkaCheckbox.toggle(%{indeterminate: true})

disabled wires no handler and mutes the row, in any state. A disabled checkbox can stay checked or unchecked, and a tap on it does nothing.

Disabled checkbox

LTR RTL

Preview

Show the whole example Show less

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

color fills the box when it is checked or mixed, and size sets the edge length of the box. The mark scales with the box.

Checkbox color and size

LTR RTL

Preview

Show the whole example Show less

<MishkaCheckbox label="Violet" checked={true} color={0xFF7C3AED} size={26} />

Your screen receives {:tap, tag} in handle_info/2. The message has no value, so the screen computes the next state. Use toggle/1 from the generated MishkaCheckbox module to get it:

def handle_info({:tap, :remember}, socket) do
  {checked?, _indeterminate?} = MishkaCheckbox.toggle(%{checked: socket.assigns.remember?})
  {:noreply, Mob.Socket.assign(socket, :remember?, checked?)}
end

toggle/1 returns {true, false} for an unchecked box, {false, false} for a checked box and {true, false} for an indeterminate box.

• name, value and required are not ported. They are HTML form plumbing.
• The web id and the *_class attributes are not ported. The Mob id prop sets a native test tag instead.
• parent is not ported. The select all behavior is a reducer in the screen over its children, and toggle/1 is the part worth sharing. The Checkbox group ships the full set of reducers.
• readonly and disabled become one prop. Both omit the handler.

• Headless Checkbox, the web component this one ports.
• Mob Checkbox Group, for a labeled set with a select all parent.
• Mob Radio, for choosing one option instead of any.
• Mob Switch, for an immediate on/off setting.
• Mob components, the full list of native components.