InputSelect

List selection component — single, multi, or async. Built on top of react-select (opens in a new tab), with Apollion's aesthetics and an ergonomic API for typical cases.

When to use

✅ Use when…	🚫 Avoid when…
Long lists where `Radio` does not fit. When you need search within the options (included by default). When options come from an API (use `loadOptions`). For multiple selection as tags (`isMulti`).	For up to ~5 exclusive options — use `Radio`. For up to ~5 non-exclusive options — use `Checkbox` or `FieldGroup`.

Interactive Demo

Async loading

<InputSelect
  isMulti
  loadingPlaceholder="Loading (please wait)..."
  loadOptions={(input) => fetch(`/api/options?q=${input}`).then((r) => r.json())}
/>

Per-item confirmation (`onItemSelect`)

In isMulti mode, onItemSelect is called per item added/removed, with a cancelAction to revert — useful for confirmation dialogs.

<InputSelect
  isMulti
  options={options}
  onItemSelect={({ type, option, cancelAction }) => {
    if (type === 'REMOVE' && !confirm(`Remove ${option.label}?`)) {
      cancelAction();
    }
  }}
/>

Gotchas

Disabling is isDisabled, not disabled — this API follows the legacy react-select prop name, unlike the rest of Apollion's form controls.

Properties


Prop	Type	Default	Description
`emptyMessage`	`string`	—	—
`isMulti`	`boolean`	—	Support multiple selected options
`loadingPlaceholder`	`string`	—	—
`loadOptions`	`((inputValue: string) => Promise<OptionType<T>[]>)`	—	—
`menuPlacement`	`"auto" \| "bottom" \| "top"`	—	Default placement of the menu in relation to the control. 'auto' will flip when there isn't enough space below the control.
`name`	`string`	—	Name of the HTML Input (optional - without this, no input will be rendered)
`onChange`	`((value: OptionType<T>[]) => void)`	—	—
`onItemSelect`	`((options: ItemSelectOption<any>) => void)`	—	—
`options`	`OptionType<T>[]`	—	—
`readOnly`	`boolean`	—	—
`ref`	`Ref<InputSelectRef>`	—	—
`size`	`"expansive" \| "medium" \| "compact" \| "micro"`	—	—
`style`	`CSSProperties`	—	—
`value`	`ValueType<OptionType<T>>`	—	—
`variant`	`"default" \| "success" \| "error"`	—	—

In addition to the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.

Theming (`theme.component.inputSelect`)

The size scale is a component token: theme.component.inputSelect.size.{expansive,medium,compact,micro}, each carrying py / px / fontSize / lineHeight? / borderRadius (foundation-scale keys) and height (px). Override one field of one size without forking the component:

createTheme({
  component: {
    inputSelect: {
      size: {
        medium: { py: 'small' },
      },
    },
  },
});