Setting

Every editor UI grows the same row: a label, sometimes a description, sometimes an explainer, and one control on the right. Setting is that row. The control is passed as children rather than as a typed prop, so the component never has to know what can sit in it — including controls that do not exist yet.

Setting

Autoplay

Start playing on load

Loop

<Setting label="Autoplay" description="Start playing on load">
  <Switch checked={autoplay} onToggle={toggleAutoplay} />
</Setting>
<Setting label="Loop" info="Restarts from the beginning when it reaches the end.">
  <Switch checked={loop} onToggle={toggleLoop} />
</Setting>

Info

info puts a sentence of context behind a small icon beside the label, so a setting can explain itself without spending a line of the panel on a description that is only read once. It renders an InfoTip, which is also exported on its own for use anywhere else.

InfoTip

Bitrate

<InfoTip>
  Higher bitrates keep more detail in fast motion, at a larger file size.
</InfoTip>

Groups

SettingGroup nests sub-settings inside its own box rather than beside it, so the relationship survives a panel with ten groups in it. The header control is what usually gates the body.

SettingGroup

Watermark

Opacity

60%

Position

<SettingGroup
label="Watermark"
control={<Switch checked={enabled} onToggle={toggleEnabled} />}
open={enabled}
>
  <Setting label="Opacity">
    <Slider value={opacity} onChange={setOpacity} />
  </Setting>
  <Setting label="Position">
    <SegmentedControl value={position} onChange={setPosition} buttons={positions} />
  </Setting>
</SettingGroup>

Axes

A property with more than one axis belongs in one row. SettingAxes puts them side by side, and wraps when the panel is too narrow, instead of splitting into two rows that read as unrelated settings.

SettingAxes

Tilt

<SettingAxes
label="Tilt"
info="Rotates the frame in 3D. Both axes are degrees."
axes={[
  { label: "X", control: <Slider value={x} min={-45} max={45} onChange={setX} /> },
  { label: "Y", control: <Slider value={y} min={-45} max={45} onChange={setY} /> },
]}
/>

API reference

Prop	Type	Default
label Name of the setting.	React.ReactNode	—
description What it does, under the label.	React.ReactNode	—
info Extra detail behind an InfoTip.	React.ReactNode	—
controlWidth Width reserved for the control, in rem, so a column of settings lines up.	number	14
children	React.ReactNode	—
…and every FlexProps prop	inherited	—

SettingGroup

Prop	Type	Default
label	ReactNode	—
description	ReactNode	—
info	ReactNode	—
control	ReactNode	—
open	boolean	—
children	React.ReactNode	—
…and every FlexProps prop	inherited	—

SettingAxes

Prop	Type	Default
label	ReactNode	—
info	ReactNode	—
axes	{ label: ReactNode; control: ReactNode }[]	—
axisWidth	number	13
…and every FlexProps prop	inherited	—

InfoTip

Prop	Type	Default
children	React.ReactNode	—
size	xssmlxl	xs
…and every FlexProps prop	inherited	—