SelectionContainer Examples

1. Multi-select Chips

Multiple options can be toggled independently. Selected chips are highlighted.

Select Skills (multiple)

JavaScript

FormWidgets.init('#sc1', 'SelectionContainer', {
    multiple: true,
    displayMode: 'chips',
    options: [
        { value: 'js', label: 'JavaScript' },
        { value: 'ts', label: 'TypeScript' },
        { value: 'py', label: 'Python' },
        { value: 'java', label: 'Java' },
        { value: 'cs', label: 'C#' },
        { value: 'go', label: 'Go' },
        { value: 'rust', label: 'Rust' }
    ]
});

2. Single-select Chips

Only one chip can be selected at a time. Selecting a new chip deselects the previous one.

Preferred Language (single)

JavaScript

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

3. Multi-select Checkboxes

Classic checkbox list allowing multiple selections.

Interests (checkboxes)

JavaScript

FormWidgets.init('#sc3', 'SelectionContainer', {
    multiple: true,
    displayMode: 'checkboxes',
    options: [
        { value: 'music', label: 'Music' },
        { value: 'sport', label: 'Sport & Fitness' },
        { value: 'reading', label: 'Reading' },
        { value: 'gaming', label: 'Gaming' },
        { value: 'travel', label: 'Travel' },
        { value: 'cooking', label: 'Cooking' }
    ]
});

4. Single-select Radio Buttons

Using displayMode: 'checkboxes' with multiple: false renders radio buttons.

Experience Level (radio)

JavaScript

FormWidgets.init('#sc4', 'SelectionContainer', {
    multiple: false,
    displayMode: 'checkboxes',   // Renders as radio buttons when multiple=false
    options: [
        { value: 'beginner', label: 'Beginner' },
        { value: 'intermediate', label: 'Intermediate' },
        { value: 'advanced', label: 'Advanced' },
        { value: 'expert', label: 'Expert' }
    ]
});

5. Chips for Tag-style Selection

Chips work great for tagging use cases with many options.

Topic Tags (select all that apply)

JavaScript

FormWidgets.init('#sc5', 'SelectionContainer', {
    multiple: true,
    displayMode: 'chips',
    options: [
        { value: 'tech', label: 'Technology' },
        { value: 'design', label: 'Design' },
        { value: 'business', label: 'Business' },
        { value: 'science', label: 'Science' },
        { value: 'health', label: 'Health' },
        { value: 'arts', label: 'Arts' },
        { value: 'education', label: 'Education' },
        { value: 'news', label: 'News' }
    ]
});

6. Days of Week Selector

A practical use case â€” selecting working days using chips.

Working Days

JavaScript

FormWidgets.init('#sc6', 'SelectionContainer', {
    multiple: true,
    displayMode: 'chips',
    options: [
        { value: '1', label: 'Mon' },
        { value: '2', label: 'Tue' },
        { value: '3', label: 'Wed' },
        { value: '4', label: 'Thu' },
        { value: '5', label: 'Fri' },
        { value: '6', label: 'Sat' },
        { value: '0', label: 'Sun' }
    ]
});