Setting row
A setting row puts the name and one-sentence help on the left and the control on the right. Stack rows under a section heading for a settings page.
With a badge
Require an API key to start the widgetRecommended
Visitors on pages without a key never see the widget.
Show code
<KbSettingRow title="Require an API key to start the widget" help="..." badge={<KbLozenge tone="gold">Recommended</KbLozenge>}>
{({ titleId }) => <KbSwitch checked={on} onChange={setOn} labelledBy={titleId} />}
</KbSettingRow>When it cannot be used yet
Require an API key to start the widgetRecommended
Visitors on pages without a key never see the widget.
Turn on API key authentication first.
Show code
<KbSettingRow ... note="Turn on API key authentication first.">When to use
- Use it for every on/off or pick-one setting on a settings page, so they all read the same.
- Say the effect in the title and the detail in help. Keep help to one sentence.
- When a control depends on another, explain why in note. Faded controls alone say nothing.
Require an API key to start the widgetRecommended
Visitors on pages without a key never see the widget.
Require an API key to start the widgetRecommended
Visitors on pages without a key never see the widget.
Turn on API key authentication first.
Import
import { KbSettingRow } from "@/components/ui/KbSettingRow";
<KbSettingRow title="Show dock on page load" help="Display the dock as soon as the page loads.">
{({ titleId }) => <KbSwitch checked={on} onChange={setOn} labelledBy={titleId} />}
</KbSettingRow>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
title | string | None | What the setting does, in words. |
help | ReactNode | None | One sentence of detail. |
meta | ReactNode | None | Quiet facts under the help, such as an identifier in code style. |
badge | ReactNode | None | A lozenge beside the title. |
note | string | None | Why the control is unavailable, in a warning tone. |
children | ReactNode | (ids) => ReactNode | None | The control. A function receives titleId and helpId. |
Keyboard and screen readers
- Pass titleId to the control as labelledBy and helpId as aria-describedby so the title and help are read with it.
- The note is text, so a dependency is never conveyed by a faded control alone.
- Under 860px the control keeps its 44px hit area (KbSwitch).