Skip to main content

Form Controls

Multiselect

Tag-based multi-value select over a hidden select multiple; initMultiselect adds chip removal, Backspace and datalist entry.

Element
<div>
Module
@basenative/components
Function
renderMultiselect

Quick start

Import the render function and call it from your server template.

import { renderMultiselect } from '@basenative/components';

renderMultiselect({ name: 'tags', label: 'Tags', items: ['JavaScript', 'CSS', 'HTML'] });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Tag picker

Type to filter the suggestions and pick one (or press Enter) to add a chip; click × on a chip, or press Backspace in the empty input, to remove one.

Live render
JavaScriptCSS
Source
renderMultiselect({
  name: 'tags',
  label: 'Tags',
  items: ['JavaScript', 'TypeScript', 'CSS', 'HTML', 'Node.js'],
  selected: ['JavaScript', 'CSS'],
})

Options

Arguments accepted by renderMultiselect().

renderMultiselect option reference
Option Type Default Description
name string — Form field name.
label string — Field label.
items string[] — Available options.
selected string[] [] Initially selected.