Components / Patterns
Settings section
A settings row with the title, description and status on the left and the controls on the right.
@fabrials/ui
Profile
SavedHow other members see you in shared conversations.
Daily digest
Send a summary every morning in the workspace time zone.
Connected apps
LoadingChecking connections
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { SettingsSection } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
title | ReactNode | Section heading. |
description | ReactNode | What the setting changes. |
status | ReactNode | A badge such as Saved, Loading or Error. |
headingLevel | 1 | 2 | 3 | 4 | Heading level for the title (2 by default). |
headingRef / headingProps | Ref / { tabIndex, id, data-* } | For code that moves focus to the heading. The section is named by the id the heading has, so a custom id keeps aria-labelledby right. |
layout | auto | stacked | auto puts the help (13rem) beside the controls from 36rem of the section's own width and stacks below it, in a sheet, a dialog or a page alike. stacked is always one column. |
children | ReactNode | The controls. |
Behavior
The section is the size container, so it takes its width from its parent: keep it in a block, grid or column flex parent, not a content-sized row. Saving and validation belong to the host.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.