JSON Layout Component Examples

Interactive examples of RSL components rendered via the JSON Layout API

Back to Component API Examples

Example 1: Basic Single Select

A simple select dropdown rendered through the JSON API with auto-initialization.

JavaScript Code • JS
// V2 API - Semantic Content Types
const config = {
    version: 2,
    layoutId: "select-demo-1",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "heading",
                level: 4,
                text: "Select Your Country:"
            }
        },
        {
            content: {
                type: "select",
                placeholder: "Choose a country...",
                options: [
                    { value: "us", label: "United States" },
                    { value: "uk", label: "United Kingdom" },
                    { value: "ca", label: "Canada" },
                    { value: "au", label: "Australia" },
                    { value: "de", label: "Germany" },
                    { value: "fr", label: "France" }
                ]
            }
        }
    ]
};

// Render the layout - components are auto-initialized!
RSL.JSONLayout.renderLayout('#demo1-output', config);

Example 2: Multi-Select with Search

A searchable multi-select dropdown with chip display.

JavaScript Code • JS
// V2 API - Multi-select with Search
const config = {
    version: 2,
    layoutId: "select-demo-2",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "heading",
                level: 4,
                text: "Select Your Skills:"
            }
        },
        {
            content: {
                type: "select",
                placeholder: "Search and select skills...",
                multi: true,
                searchable: true,
                options: [
                    { value: "js", label: "JavaScript" },
                    { value: "python", label: "Python" },
                    { value: "java", label: "Java" },
                    { value: "csharp", label: "C#" },
                    { value: "php", label: "PHP" },
                    { value: "ruby", label: "Ruby" },
                    { value: "go", label: "Go" },
                    { value: "rust", label: "Rust" }
                ]
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo2-output', config);

Example 3: Complete Form Layout

A multi-column form with multiple select components and a submit button.

JavaScript Code • JS
const formConfig = {
    version: 1,
    layoutId: "form-demo",
    breakpoints: { xs: 1, md: 2 },
    gap: "1.5rem",
    items: [
        {
            id: "country-select",
            content: {
                type: "html",
                value: `
                    <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
                        Country:
                    </label>
                    <div data-rsl-select
                         data-rsl-select-name="country"
                         data-rsl-select-searchable="true">
                        <option value="">Select country...</option>
                        <option value="us">United States</option>
                        <option value="uk">United Kingdom</option>
                        <option value="ca">Canada</option>
                    </div>
                `
            }
        },
        {
            id: "language-select",
            content: {
                type: "html",
                value: `
                    <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
                        Language:
                    </label>
                    <div data-rsl-select
                         data-rsl-select-name="language">
                        <option value="">Select language...</option>
                        <option value="en">English</option>
                        <option value="es">Spanish</option>
                        <option value="fr">French</option>
                        <option value="de">German</option>
                    </div>
                `
            }
        },
        {
            id: "interests-select",
            classes: ["span-full"],
            content: {
                type: "html",
                value: `
                    <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
                        Interests (Multi-select):
                    </label>
                    <div data-rsl-select
                         data-rsl-select-multi="true"
                         data-rsl-select-chips-toggle="true"
                         data-rsl-select-name="interests">
                        <option value="tech">Technology</option>
                        <option value="sports">Sports</option>
                        <option value="music">Music</option>
                        <option value="travel">Travel</option>
                    </div>
                `
            }
        },
        {
            id: "submit-button",
            classes: ["span-full"],
            content: {
                type: "html",
                value: `
                    <button type="button" class="btn"
                            style="width: 100%; margin-top: 1rem;"
                            onclick="alert('Form would be submitted!')">
                        Submit Form
                    </button>
                `
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo3-output', formConfig);

Example 4: Get Selected Values

Interact with select components programmatically using the JavaScript API.

JavaScript Code • JS
// Render the select
const config = {
    version: 1,
    layoutId: "select-demo-4",
    breakpoints: { xs: 1 },
    items: [
        {
            id: "demo-select",
            content: {
                type: "html",
                value: `
                    <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
                        Select Your Favorites:
                    </label>
                    <div id="favorite-select"
                         data-rsl-select
                         data-rsl-select-multi="true"
                         data-rsl-select-name="favorites">
                        <option value="pizza">Pizza</option>
                        <option value="burger">Burger</option>
                        <option value="sushi">Sushi</option>
                        <option value="pasta">Pasta</option>
                    </div>
                `
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo4-output', config);

// Get values programmatically
function getValues() {
    const selectElement = document.querySelector('#favorite-select');
    const values = RSL.Select.getValue(selectElement);
    console.log('Selected values:', values);
    return values;
}