Module

Halogen.Widgets.MultiSelect

Package: purescript-halogen-widgets
Repository: afcondon/purescript-halogen-widgets

A controlled multi-select dropdown: a compact control whose label summarises the current selection, opening a popover of options each with a checkbox that toggles it in or out. Several options are active at once.

It is the sibling of Halogen.Widgets.Select — same popover look, same Style tokens, same controlled/ephemeral split — but a genuinely different contract, so it lives in its own module rather than as a multi flag on Select. That keeps the single-select path byte-for-byte unchanged and keeps each component's Input/Output honest about its own shape (an Array String selection, not a Maybe String).

Two kinds of state, deliberately split (as in Select, see CONTRACT.md):

selected is CONTROLLED — an Array String, app-meaningful, owned by the parent; the widget only requests a change via SelectedMany.
open, query, and the keyboard focus are EPHEMERAL — the widget owns them and never surfaces them.

#Option Source

type Option = { label :: String, value :: String }

#OptionGroup Source

type OptionGroup = { label :: String, options :: Array Option }

A named group of options — renders as an inline, non-selectable header over its indented, checkable leaves. (No fly-out/cascade presentation here; a multi-select is about toggling, and a flat-ish list reads best for that.)

#Input Source

type Input = { disabled :: Boolean, groups :: Array OptionGroup, maxLabels :: Int, minWidth :: Maybe String, options :: Array Option, placeholder :: String, searchable :: Boolean, selected :: Array String }

Two ways to supply options, and they coexist (mirroring Select):

options — a flat, un-headed list.
groups — named sections with inline headers.

selected is the controlled set of chosen values (an Array String, order-insensitive; membership is what matters). maxLabels governs the control's summary: with n items selected, show the comma-joined labels when n <= maxLabels, else collapse to "n selected". minWidth is an optional CSS length for the control box (Nothing = the 180px default), exactly like Select.minWidth.

#Output Source

data Output

Raised whenever the user toggles an option, carrying the FULL new selection (not a per-item delta) — so the parent just stores the array it is handed.

Constructors

SelectedMany (Array String)

#Query Source

data Query a

Imperative set of the controlled selection, symmetric with Select.Set.

Constructors

SetMany (Array String) a

#Slot Source

type Slot = Slot Query Output

#component Source

component :: forall m. MonadAff m => Component Query Input Output m

#defaultInput Source

defaultInput :: Array Option -> Input

The flat on-ramp: a plain list of checkable options.

#groupedInput Source

groupedInput :: Array OptionGroup -> Input

The grouped on-ramp: named sections with inline headers over their leaves.

Modules: Halogen.Widgets.Accordion.Internal; Halogen.Widgets.Compare; Halogen.Widgets.DoubleKnob; Halogen.Widgets.Field; Halogen.Widgets.HAccordion; Halogen.Widgets.Knob; Halogen.Widgets.Modal; Halogen.Widgets.Motion; Halogen.Widgets.MultiSelect; Halogen.Widgets.Panel; Halogen.Widgets.SegmentedControl; Halogen.Widgets.Select; Halogen.Widgets.Slider; Halogen.Widgets.Stepper; Halogen.Widgets.Style; Halogen.Widgets.Toast; Halogen.Widgets.Toggle; Halogen.Widgets.VAccordion