SelectionContainer

A multi-select or single-select widget that renders options as styled chips or checkboxes/radio buttons. Fully keyboard-navigable with a clean, touch-friendly interface.

JavaScript Initialization Only

SelectionContainer requires JavaScript initialization via FormWidgets.init(). There is no auto-init class name â€” the options must be provided via the JavaScript API.

View Examples

Usage

Multi-select Chips

HTML + JavaScript

<div id="skills"></div>

<script>
FormWidgets.init('#skills', 'SelectionContainer', {
    multiple: true,
    displayMode: 'chips',
    options: [
        { value: 'js', label: 'JavaScript' },
        { value: 'py', label: 'Python' },
        { value: 'java', label: 'Java' },
        { value: 'cs', label: 'C#' }
    ]
});
</script>

Single-select Chips

JavaScript

FormWidgets.init('#language', 'SelectionContainer', {
    multiple: false,
    displayMode: 'chips',
    options: [
        { value: 'en', label: 'English' },
        { value: 'fr', label: 'French' },
        { value: 'de', label: 'German' }
    ]
});

Checkboxes / Radio Buttons

JavaScript

// Multi-select as checkboxes
FormWidgets.init('#interests', 'SelectionContainer', {
    multiple: true,
    displayMode: 'checkboxes',
    options: [
        { value: 'music', label: 'Music' },
        { value: 'sport', label: 'Sport' },
        { value: 'reading', label: 'Reading' }
    ]
});

// Single-select as radio buttons (displayMode: 'checkboxes' + multiple: false)
FormWidgets.init('#level', 'SelectionContainer', {
    multiple: false,
    displayMode: 'checkboxes',
    options: [
        { value: 'beginner', label: 'Beginner' },
        { value: 'intermediate', label: 'Intermediate' },
        { value: 'advanced', label: 'Advanced' }
    ]
});

Options

Option	Type	Default	Description
options	array	[]	Array of `{ value, label }` objects defining the available choices.
multiple	boolean	true	When `true`, multiple items can be selected simultaneously. When `false`, selecting one item deselects others.
displayMode	string	'chips'	How options are rendered. `'chips'` shows toggle buttons; `'checkboxes'` shows checkboxes (multi) or radio buttons (single).
required	boolean	false	Marks the widget as required.

Display Mode Matrix

displayMode	multiple	Result
`'chips'`	`true`	Toggle chip buttons â€” multiple can be selected
`'chips'`	`false`	Toggle chip buttons â€” only one can be selected at a time
`'checkboxes'`	`true`	Checkbox list â€” multiple can be checked
`'checkboxes'`	`false`	Radio button list â€” only one can be selected

Keyboard Navigation (Chips Mode)

TabMove focus onto the chip group

→ / ↓Move to next chip

← / ↑Move to previous chip

Enter / SpaceToggle the focused chip (select/deselect)

Features

Chips Mode

Visual toggle chips for a compact, modern multi-select UI.

Checkbox Mode

Traditional checkboxes or radio buttons for accessibility and familiarity.

Single or Multi

Switch between exclusive (radio) and inclusive (multi) selection.

Keyboard Navigation

Full arrow key navigation between options in chips mode.