Multi Select

import { Field, MultiSelect } from "@flowstack-ui/brick";
// or
import { MultiSelect } from "@flowstack-ui/brick/multi-select";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/multi-select.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Both entrypoints export MultiSelect, MultiSelectRoot, MultiSelectTrigger, MultiSelectValue, MultiSelectIcon, MultiSelectPortal, MultiSelectContent, MultiSelectListbox, MultiSelectViewport, MultiSelectScrollUpButton, MultiSelectScrollDownButton, MultiSelectGroup, MultiSelectLabel, MultiSelectItem, MultiSelectItemText, MultiSelectItemIndicator, MultiSelectSeparator, and MultiSelectArrow. Public types are MultiSelectRootProps, MultiSelectTriggerProps, MultiSelectValueProps, MultiSelectIconProps, MultiSelectPortalProps, MultiSelectContentProps, MultiSelectListboxProps, MultiSelectViewportProps, MultiSelectScrollUpButtonProps, MultiSelectScrollDownButtonProps, MultiSelectGroupProps, MultiSelectLabelProps, MultiSelectItemProps, MultiSelectItemTextProps, MultiSelectItemIndicatorProps, MultiSelectSeparatorProps, MultiSelectArrowProps, MultiSelectVariant, MultiSelectSize, and MultiSelectShape.

<Field.Root id="team-skills" required>
  <Field.Label>Team skills</Field.Label>
  <MultiSelect.Root defaultValue={["design", "engineering"]} name="skills" required>
    <MultiSelect.Trigger>
      <MultiSelect.Value placeholder="Choose skills" />
      <MultiSelect.Icon />
    </MultiSelect.Trigger>
    <MultiSelect.Content>
      <MultiSelect.ScrollUpButton />
      <MultiSelect.Viewport>
        <MultiSelect.Group>
          <MultiSelect.Label>Disciplines</MultiSelect.Label>
          <MultiSelect.Item value="design">
            <MultiSelect.ItemText>Design</MultiSelect.ItemText>
            <MultiSelect.ItemIndicator />
          </MultiSelect.Item>
          <MultiSelect.Item value="engineering">
            <MultiSelect.ItemText>Engineering</MultiSelect.ItemText>
            <MultiSelect.ItemIndicator />
          </MultiSelect.Item>
        </MultiSelect.Group>
      </MultiSelect.Viewport>
      <MultiSelect.ScrollDownButton />
      <MultiSelect.Arrow />
    </MultiSelect.Content>
  </MultiSelect.Root>
  <Field.Description>Choose every discipline that applies.</Field.Description>
</Field.Root>

Placeholder text is a hint, not an accessible label. Use Field.Label or an explicit ARIA label.

• outline uses a raised surface and strong complete border.
• soft uses a subtle fill and restrained border.
• underline uses a transparent surface and bottom line.
• sm, md, and lg use 36px, 44px, and 52px minimum trigger and option-row heights.
• sharp, rounded, and pill change Trigger geometry only.

The popup and options do not change with Trigger variant. Atom's data state drives open, highlighted, selected, disabled, read-only, and invalid paint. State changes never alter control or item geometry. Value text truncates before it can displace Icon; ItemIndicator owns one fixed logical-end column.

Field, forms, and validation

Compose MultiSelect inside Field for the visible label, description, required marker, and error. Atom's aligned native multi-select remains the submission, required-validity, external form, and reset proxy. Do not add hidden inputs or reproduce validation in application code.

Controlled and uncontrolled value/open state are both supported. Native form behavior remains unchanged by Brick visual props; Brick size is control geometry and never the native multi-select's numeric size attribute.

Groups, scrolling, portal, and Arrow

Place Label and Items inside Group to expose an accessible option group. Use Separator between authored groups. Viewport owns option scrolling; the conditional scroll buttons are specialized MultiSelect controls and are not a generic Scroll Area replacement.

Content portals and positions itself by default. Portal may provide an explicit portal owner, and Content supports Atom's custom container or disablePortal behavior. Arrow must be inside Content and follows its collision-resolved data-side and data-align.

See the /multi-select playground route for recipes, states, long scrolling groups, forms, composition, appearance, customization, RTL, and responsive evidence.

Exclusions

MultiSelect intentionally has no single-value mode, flat items API, editable search, arbitrary tone, consumer placement API, virtualization, async/loading state, option creation, or automatic mobile sheet. Those require separate component contracts.

MultiSelect uses logical spacing, constrained popup width/height, long-label wrapping in options, and trigger truncation. It stays within narrow viewports, supports 200%/400% zoom, and reverses logical placement in RTL. Brick does not add responsive prop objects or an automatic mobile sheet.