Brio

Settings Forms

Profile

Display name, email, bio, and avatar upload.

Profile

A short description shown on your public profile.

 
<docs-resize>
    <div class="card center" style="--center-max: 40rem;">
        <div class="stack">
            <h2>Profile</h2>
            <form class="stack">
                <div class="stack is-tight">
                    <label for="profile-avatar">Avatar</label>
                    <input id="profile-avatar" type="file" class="input" accept="image/*"/>
                </div>
                <div class="stack is-tight">
                    <label for="profile-name">Display name</label>
                    <input id="profile-name" type="text" class="input" value="Patrick Ward" autocomplete="name"/>
                </div>
                <div class="stack is-tight">
                    <label for="profile-email">Email</label>
                    <input id="profile-email" type="email" class="input" value="patrick@example.com" autocomplete="email"/>
                </div>
                <div class="stack is-tight">
                    <label for="profile-bio">Bio</label>
                    <textarea id="profile-bio" class="input" rows="3" aria-describedby="profile-bio-help">Developer working across the stack.</textarea>
                    <p id="profile-bio-help" class="text-muted text--1">A short description shown on your public profile.</p>
                </div>
                <div class="cluster is-end">
                    <button class="button is-ghost" type="button">Cancel</button>
                    <button class="button" type="submit">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</docs-resize>

Notifications

Toggle switches grouped in fieldsets. Label text left, control right via .cluster.is-between.

Notifications

Email
Push 
<docs-resize>
    <div class="card center" style="--center-max: 40rem;">
        <div class="stack">
            <h2>Notifications</h2>
            <form class="stack">
                <fieldset class="stack is-relaxed">
                    <legend class="text-semibold">Email</legend>
                    <hr class="divider" style="--divider-spacing: var(--gap-dense);"/>
                    <label class="cluster is-between">
                        <span>Product updates</span>
                        <input type="checkbox" role="switch" checked="" class="input"/>
                    </label>
                    <label class="cluster is-between">
                        <span>Weekly digest</span>
                        <input type="checkbox" role="switch" class="input"/>
                    </label>
                    <label class="cluster is-between">
                        <span>Security alerts</span>
                        <input type="checkbox" role="switch" checked="" class="input"/>
                    </label>
                </fieldset>

                <fieldset class="stack is-snug">
                    <legend class="text-semibold">Push</legend>
                    <hr class="divider" style="--divider-spacing: var(--gap-dense);"/>
                    <label class="cluster is-between">
                        <span>Direct mentions</span>
                        <input type="checkbox" role="switch" checked="" class="input"/>
                    </label>
                    <label class="cluster is-between">
                        <span>Team activity</span>
                        <input type="checkbox" role="switch" class="input"/>
                    </label>
                </fieldset>

                <div class="cluster is-end">
                    <button class="button is-ghost" type="button">Reset</button>
                    <button class="button" type="submit">Save preferences</button>
                </div>
            </form>
        </div>
    </div>
</docs-resize>

Change password

Current password to verify, new password with confirmation.

Change password

At least 8 characters.

 
<docs-resize>
    <div class="card center" style="--center-max: 40rem;">
        <div class="stack">
            <h2>Change password</h2>
            <form class="stack">
                <div class="stack is-tight">
                    <label for="pwd-current">Current password</label>
                    <input id="pwd-current" type="password" class="input" placeholder="Enter current password" required="" autocomplete="current-password"/>
                </div>
                <div class="stack is-tight">
                    <label for="pwd-new">New password</label>
                    <input id="pwd-new" type="password" class="input" placeholder="Enter new password" required="" minlength="8" autocomplete="new-password" aria-describedby="pwd-new-help"/>
                    <p id="pwd-new-help" class="text-muted text--1">At least 8 characters.</p>
                </div>
                <div class="stack is-tight">
                    <label for="pwd-confirm">Confirm new password</label>
                    <input id="pwd-confirm" type="password" class="input" placeholder="Confirm new password" required="" autocomplete="new-password"/>
                </div>
                <div class="cluster is-end">
                    <button class="button is-ghost" type="button">Cancel</button>
                    <button class="button" type="submit">Update password</button>
                </div>
            </form>
        </div>
    </div>
</docs-resize>

Danger zone

Destructive actions in a red-bordered card. Override --card-border inline to tint the card without new CSS.

Danger zone

Transfer ownership

Move this project to another account or organization.

Delete project

Remove the project and all its data. This cannot be undone.

 
<docs-resize>
    <div class="card center" style="--center-max: 40rem; --card-border: var(--color-danger-border);">
        <div class="stack">
            <h2 class="text-danger">Danger zone</h2>
            <div class="stack">
                <div class="cluster is-between">
                    <div class="stack is-tight">
                        <strong>Transfer ownership</strong>
                        <p class="text-muted text--1">Move this project to another account or organization.</p>
                    </div>
                    <button class="button is-outlined" type="button">Transfer</button>
                </div>
                <div class="cluster is-between">
                    <div class="stack is-tight">
                        <strong>Delete project</strong>
                        <p class="text-muted text--1">Remove the project and all its data. This cannot be undone.</p>
                    </div>
                    <button class="button is-danger" type="button">Delete</button>
                </div>
            </div>
        </div>
    </div>
</docs-resize>

Patterns