Select

Select renders a column. An optional label sits above a bordered trigger. The trigger shows the label of each chosen option, or the placeholder in muted text when nothing is chosen. The ▾ at the end of the row turns into ▴ while the list is open.

The list opens in flow, directly below the trigger, and does not float over the page. A list of options is as long as its data, and a floating list would cover the field it came from. The list uses the surface of the Mob Menu component, so a select and a menu look alike, and a chosen option shows a ✓. For a long list, put the same options in a bottom Mob Drawer.

The screen owns the state. You keep value and open in assigns and pass them in. Taps arrive in handle_info/2, and MishkaSelect.toggle/3 returns the next {value, close?} pair. Its third argument sets the mode. In single mode, a pick replaces the value and closes the list. In multiple mode, a pick adds the option, or removes it when it is already chosen, and the list stays open.

Write options as <MishkaSelectOption> children, or build them from data with option/3. Both make the same node, so you can mix them in one select. Consecutive options that share a group form one run under a heading. The order you write the options in is the grouping.

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

mix mishka.ui.gen.mob select

The generator registers the <Select> tag so you can use it in ~MOB markup. It also generates the Mob Menu component, which draws the list. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaSelect>. Without a prefix the tag is <Select>.

Picking an option replaces the value and closes the list. The screen passes in the current value and open state, and MishkaSelect.toggle/3 returns the next value and whether the list closes.

Single choice select

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. A trigger shows the current choice and opens a list.

<MishkaSelect value={@country} open={@open?} on_toggle={:open} on_select={:pick}>
  <MishkaSelectOption id={:uk} label="United Kingdom" />
  <MishkaSelectOption id={:ir} label="Iran" />
</MishkaSelect>

{value, close?} = MishkaSelect.toggle(@country, id, false)

In multiple mode, a pick adds the option to value and keeps the list open, so you can choose several in a row. A chosen option shows a ✓. The Rust option has disabled={true}, so you cannot pick it.

Multiple select

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. Picking accumulates and the list stays open.

<MishkaSelect value={@langs} multiple={true} open={@open?} on_select={:pick}>
  <MishkaSelectOption id={:elixir} label="Elixir" />
  <MishkaSelectOption id={:erlang} label="Erlang" />
  <MishkaSelectOption id={:rust} label="Rust" disabled={true} />
</MishkaSelect>

{value, close?} = MishkaSelect.toggle(@langs, id, true)

Options that sit next to each other and share a group get one heading above them. The component sorts nothing, so the order you write the options in is the grouping. This select is also multiple, so the list stays open while you pick.

Grouped select options

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. A heading above each run of options.

<MishkaSelect value={@toppings} multiple={true} open={@open?} on_select={:pick}>
  <MishkaSelectOption id={:cheese} label="Cheese" group="CLASSIC" />
  <MishkaSelectOption id={:pepperoni} label="Pepperoni" group="CLASSIC" />
  <MishkaSelectOption id={:mushroom} label="Mushroom" group="VEGGIE" />
  <MishkaSelectOption id={:onion} label="Onion" group="VEGGIE" />
</MishkaSelect>

# CONSECUTIVE options sharing a group belong to it, so your order is the
# grouping — nothing is sorted underneath you.

A disabled select shows muted text and does not open. Its options come from a list. option/3 builds the same node as <MishkaSelectOption>, so you can map data to options.

Disabled select and options from data

LTR RTL

Preview

Show the whole example Show less

<MishkaSelect value={:uk} disabled={true}>
  {Enum.map(@countries, fn {id, label} -> MishkaSelect.option(id, label) end)}
</MishkaSelect>

Option attributes

Each <MishkaSelectOption> takes these attributes. Every attribute except id is optional.

Helper functions

The generated MishkaSelect module exposes these functions:

Your screen receives two messages in handle_info/2:

• on_toggle sends {:tap, tag} when you tap the trigger. A disabled select drops it.
• on_select sends {:tap, {tag, option_id}} when you tap an option.

With on_toggle={:open} and on_select={:pick}, the screen handles them like this:

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

def handle_info({:tap, {:pick, id}}, socket) do
  {value, close?} = MishkaSelect.toggle(socket.assigns.country, id, false)

  {:noreply,
   socket
   |> Mob.Socket.assign(:country, value)
   |> Mob.Socket.assign(:open?, not close?)}
end

• The list renders in flow under the trigger. It does not float beside it, so side does not apply.
• name, form, required and readonly are not ported, because they are form plumbing.
• highlight_on_hover is not ported, because a touch screen has no hover.
• The *_class attributes are not ported. Mob draws native views, so there is no CSS.

• Headless Select, the web component this one ports.
• Mob Combobox, which adds a text field that filters the same options.
• Mob Menu, which provides the list surface Select uses.
• Mob Drawer, which holds a long list of options in a bottom sheet.
• Mob components, the full list of native components.