SettingsSection
A heading, one line of help, and a bordered group of setting rows.
SourcePackage @kerf-js/veneer
Preview
tsx
import { SettingRow, SettingsSection, Switch} from '@kerf-js/veneer'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.', ].join('')} > {(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 @kerf-js/veneerUsage
tsx
import { SettingsSection } from '@kerf-js/veneer'Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer'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