SettingsSection

A heading, one line of help, and a bordered group of setting rows.

SourcePackage @weft-js/warp

Preview

tsx

import { SettingRow, SettingsSection, Switch } from '@weft-js/warp'export function Notifications() {  return (    <SettingsWidth>      <SettingsSection id="mail" title="Email" description="Choose what reaches your inbox.">      <SettingRow title="Weekly summary" description="Deploys, uptime and spend, every Monday.">        {(ids: { label: string; description: string }) => <Switch size="sm" defaultChecked aria-labelledby={ids.label} aria-describedby={ids.description} />}      </SettingRow>      <SettingRow title="Product news" description="A few times a year.">        {(ids: { label: string; description: string }) => <Switch size="sm" aria-labelledby={ids.label} aria-describedby={ids.description} />}      </SettingRow>    </SettingsSection>    </SettingsWidth>  )}const SettingsWidth = ({ children }: { children: unknown }) => <div style="container: settings / inline-size">{children}</div>

Installation

npm install @weft-js/warp

Usage

tsx

import { SettingsSection } from '@weft-js/warp'<SettingsWidth>  <SettingsSection id="mail" title="Email" description="Choose what reaches your inbox.">  <SettingRow title="Weekly summary" description="Deploys, uptime and spend, every Monday.">    {(ids: { label: string; description: string }) => <Switch size="sm" defaultChecked aria-labelledby={ids.label} aria-describedby={ids.description} />}  </SettingRow>  <SettingRow title="Product news" description="A few times a year.">    {(ids: { label: string; description: string }) => <Switch size="sm" aria-labelledby={ids.label} aria-describedby={ids.description} />}  </SettingRow></SettingsSection></SettingsWidth>

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`id`	`string`	—	Anchors the section, and matches its `SettingsLayout` entry.
`title`	`unknown`	—	The heading.
`description`	`unknown`	—	One line under the heading.
`tone`	`"critical"`	—	`critical` draws the danger border.
`as`	`"h3" \| "h4"`	`'h3'`	The heading level.
`children`	`unknown`	—	What it contains.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="settings-section"] [data-part="group"]

group