SettingRow

One setting: its name and help on one side, its control on the other.

SourcePackage @weft-js/warp

Preview

tsx

import { Button, Input, Select, SettingRow, SettingsSection } from '@weft-js/warp'export function Controls() {  return (    <SettingsWidth>      <SettingsSection id="row-kinds" title="Build" description="A control on the end, or stacked for a wide field.">      <SettingRow title="Node version" description="Used for every build of this project."><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 @weft-js/warp

Usage

tsx

import { SettingRow } from '@weft-js/warp'<SettingsWidth>  <SettingsSection id="row-kinds" title="Build" description="A control on the end, or stacked for a wide field.">  <SettingRow title="Node version" description="Used for every build of this project."><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>

Accessibility

A function child gets the ids of the title and the help, for aria-labelledby and aria-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 section Switch