Design System/Blocks/Settings Screen

Settings Screen

A multi-section settings page with sidebar labels and right-column controls. Includes profile, notifications, password, and danger zone.

Block

Page Heading · Section Heading · Field · Action Panel · Switch

When To Use

  • Use Settings Screen when you need a composed screen-level pattern and want the structural decisions made before you tune the visuals.
  • Start from the example whose layout and information hierarchy already match the workflow you are building.
  • Review the examples below to compare density, framing, and emphasis before copying one into production code.

When Not To Use

  • Do not use Settings Screen when the page structure is still exploratory; start with smaller primitives if the workflow is not stable yet.
  • Do not copy a full-screen pattern unchanged when only one fragment of the layout is relevant to the task.

Accessibility Notes

  • Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
  • Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
  • Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Included examples

Profile, notifications, password, danger zone

Variation points

Compare layout, content density, and emphasis across the included examples before copying an implementation.

Example Code

import { useState } from "react";
import { PageHeading } from "@hilum/ui";
import { SectionHeading as SectionHeadingComponent } from "@hilum/ui";
import { ActionPanel } from "@hilum/ui";
import { Field } from "@hilum/ui";
import { Input } from "@hilum/ui";
import { Textarea } from "@hilum/ui";
import { Switch } from "@hilum/ui";
import { Label } from "@hilum/ui";
import { Button } from "@hilum/ui";
import { Avatar, AvatarFallback } from "@hilum/ui";

const NOTIFICATIONS = [
  { id: "notif-comments", label: "Comments", description: "Get notified when someone comments.", defaultChecked: true },
  { id: "notif-mentions", label: "Mentions", description: "Get notified when you are mentioned.", defaultChecked: true },
  { id: "notif-updates", label: "Product updates", description: "News and announcements.", defaultChecked: false },
  { id: "notif-security", label: "Security alerts", description: "Login and account security events.", defaultChecked: true },
];
// ...trimmed for docs

Settings Screen · Multi-section

Profile, notifications, password, danger zone

3-column layout: label on left, controls on right

Settings

Profile

Update your public profile.

TC

Brief description for your profile.

Notifications

Choose what you want to be notified about.

Get notified when someone comments.

Get notified when you are mentioned.

News and announcements.

Login and account security events.

Password

Update your password to keep your account secure.

Delete account

Permanently delete your account and all associated data. This action cannot be undone.