Multi Select — ARC UI

Components

Multi Select

input

interactive

<arc-multi-select>

Overview

Guidelines

When to use

Always provide a `label` so the field is accessible to screen readers
Use a descriptive `placeholder` to hint at expected input, such as "Choose languages..."
Keep option labels concise so they display well as tags inside the control
Listen to `arc-change` to react to selection changes and keep external state in sync
Pre-populate the `value` array when editing existing records to show current selections

When not to use

Do not use MultiSelect when only a single value is needed -- use Select instead
Do not provide more than ~50 options without also considering server-side filtering via arc-change
Do not use extremely long option labels -- they will overflow the tag chips and the dropdown
Do not set both `disabled` and a pre-selected `value` without a clear visual explanation of why editing is blocked
Avoid nesting MultiSelect inside a popover or modal without testing z-index stacking for the dropdown

Features

Selected values rendered as removable pill-shaped tag chips inside the control area
Inline type-ahead filtering that narrows the dropdown options in real time
Full keyboard navigation: ArrowUp/Down to move, Enter to select, Escape to close, Backspace to remove the last tag
Check marks next to already-selected options in the dropdown for clear state indication
Declarative options via `<arc-option>` child elements with `value` and `label` attributes
Automatic outside-click dismissal of the dropdown panel
Focus glow on the control using the shared `--focus-glow` design token
"No results found" empty state when the filter query matches no options

Preview

React

Vue

Angular

Svelte

Lit

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-multi-select label="Languages" placeholder="Choose...">
  <arc-option value="js">JavaScript</arc-option>
  <arc-option value="ts">TypeScript</arc-option>
  <arc-option value="py">Python</arc-option>
</arc-multi-select>

import { MultiSelect, Option } from '@arclux/arc-ui-react';

<MultiSelect label="Languages" placeholder="Choose...">
  <Option value="js">JavaScript</Option>
  <Option value="ts">TypeScript</Option>
  <Option value="py">Python</Option>
</MultiSelect>

<script setup>
import { MultiSelect, Option } from '@arclux/arc-ui-vue';
</script>

<template>
  <MultiSelect label="Languages" placeholder="Choose...">
    <Option value="js">JavaScript</Option>
    <Option value="ts">TypeScript</Option>
    <Option value="py">Python</Option>
  </MultiSelect>
</template>

<script>
  import { MultiSelect, Option } from '@arclux/arc-ui-svelte';
</script>

<MultiSelect label="Languages" placeholder="Choose...">
  <Option value="js">JavaScript</Option>
  <Option value="ts">TypeScript</Option>
  <Option value="py">Python</Option>
</MultiSelect>

import { Component } from '@angular/core';
import { MultiSelect, Option } from '@arclux/arc-ui-angular';

@Component({
  imports: [MultiSelect, Option],
  template: `
    <MultiSelect label="Languages" placeholder="Choose...">
      <Option value="js">JavaScript</Option>
      <Option value="ts">TypeScript</Option>
      <Option value="py">Python</Option>
    </MultiSelect>
  `,
})
export class MyComponent {}

import { MultiSelect, Option } from '@arclux/arc-ui-solid';

<MultiSelect label="Languages" placeholder="Choose...">
  <Option value="js">JavaScript</Option>
  <Option value="ts">TypeScript</Option>
  <Option value="py">Python</Option>
</MultiSelect>

import { MultiSelect, Option } from '@arclux/arc-ui-preact';

<MultiSelect label="Languages" placeholder="Choose...">
  <Option value="js">JavaScript</Option>
  <Option value="ts">TypeScript</Option>
  <Option value="py">Python</Option>
</MultiSelect>

API

Prop	Type	Default	Description
`value`	`string[]`	`[]`	Array of selected option values. Updated when items are toggled and emitted via `arc-change`.
`label`	`string`	`''`	Visible label rendered above the control in a small uppercase style.
`placeholder`	`string`	`''`	Hint text shown inside the control when no items are selected and the input is empty.
`disabled`	`boolean`	`false`	Disables the control, preventing interaction and reducing opacity to 50%.

Events

Event	Description
`arc-change`	Fired when the selected values change