Settings Component

Axiom01 provides a flexible and visually consistent structure for creating settings panels or preference forms. This component helps organize various configuration options in a user-friendly manner.

Live Example

User Preferences

General

Theme

Language

Notifications

Email Notifications

Push Notifications

HTML Structure

A settings panel typically uses a main container, with optional header and footer, and sections to group related settings.

<div class="settings-panel">
<header>
    <h3>User Preferences</h3>
</header>
<section>
    <div class="setting-group">
        <h4>General</h4>
        <div class="setting-item">
            <label for="theme-select-setting">Theme</label>
            <select id="theme-select-setting">
                <option value="light">Light</option>
                <option value="dark">Dark</option>
            </select>
        </div>
    </div>
    <div class="setting-group">
        <h4>Notifications</h4>
        <div class="setting-item toggle-setting">
            <label for="email-notifications">Email Notifications</label>
            <input type="checkbox" id="email-notifications" role="switch" checked>
        </div>
    </div>
</section>
<footer>
    <button class="button secondary">Cancel</button>
    <button class="button primary">Save Changes</button>
</footer>
</div>

Styling

The .settings-panel provides the overall container styling. Settings are grouped using .setting-group, and individual options are contained within .setting-item. Axiom01's base form element styles are applied automatically.

.settings-panel: Main container, often styled like a card.
.settings-panel header, section, footer: Semantic divisions for content.
.setting-group: Organizes related settings with a sub-heading.
.setting-item: Contains a single setting control (e.g., label + input/select).
.toggle-setting: A modifier for settings that use a toggle switch (checkbox with role="switch").

JavaScript Integration

You will need JavaScript to handle the logic for saving and loading user preferences, as well as any dynamic interactions within the settings (e.g., enabling/disabling options based on other selections).

Accessibility

Ensure all form controls have associated <label> elements. For custom toggle switches, use role="switch" on the input for proper screen reader interpretation.

Customization

Customize the appearance using Axiom01's CSS variables for colors, spacing, and typography. The layout of setting items can be adjusted with standard CSS properties (e.g., flexbox or grid for .setting-item).