SettingRow
One setting: its name and help on one side, its control on the other.
SourcePackage @kerf-js/veneer
Preview
tsx
import { Button, Input, Select, SettingRow, SettingsSection} from '@kerf-js/veneer'export function Controls() { return ( <SettingsWidth> <SettingsSection id="row-kinds" title="Build" description={[ 'A control on the end, or stacked ', 'for a wide field.', ].join('')} > <SettingRow title="Node version" description={[ 'Used for every build of this ', 'project.', ].join('')} > <Select label="Node version" options={NODE_VERSIONS} defaultValue="26" /> </SettingRow> <SettingRow title="Clear the build cache" description="The next build starts from nothing." > <Button emphasis="outline" tone="neutral" size="sm" > Clear cache </Button> </SettingRow> <SettingRow layout="stack"> <Input label="Build command" defaultValue="pnpm build" /> </SettingRow> </SettingsSection> </SettingsWidth> )}const SettingsWidth = ({ children,}: { children: unknown}) => ( <div style="container: settings / inline-size"> {children} </div>)const NODE_VERSIONS = [ { value: '26', label: 'Node 26' }, { value: '24', label: 'Node 24' },]Installation
npm install @kerf-js/veneerUsage
tsx
import { SettingRow } from '@kerf-js/veneer'Accessibility
- A function child gets the ids of the title and the help, for
aria-labelledbyandaria-describedby.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | unknown | — | The setting's name. |
description | unknown | — | What it does. |
layout | "stack" | — | stack puts the control on its own line. |
children | unknown | — | What it contains. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="setting-row"] [data-part="control"]
control
RelatedSettings sectionSwitch