openchamber/.agents/skills/settings-ui-patterns/references/controls.md

Settings Controls

Load theme-system for button/icon/color contracts and locale-ui-patterns for every visible or accessible string.

Choosing A Control

• Short chip-like option set: shared Button variant="chip" size="xs" with aria-pressed.
• Explicit mutually exclusive list: shared Radio.
• Boolean value: shared Checkbox, not paired show/hide buttons.
• Numeric value: shared NumberInput.
• Text/path value: shared Input plus shared actions.

Do not couple unrelated toggles beneath a synthetic heading.

Segmented Option

<Button variant="chip" size="xs" aria-pressed={isSelected}>
  {t(labelKey)}
</Button>

Radio Row

<div role="radiogroup" aria-label={t(groupLabelKey)}>
  <div className="flex items-center gap-2 py-0.5">
    <Radio checked={selected} onChange={onSelect} ariaLabel={t(labelKey)} />
    <span className={cn('typography-ui-label', selected ? 'text-foreground' : 'text-foreground/50')}>
      {t(labelKey)}
    </span>
  </div>
</div>

Checkbox Row

<div className="flex cursor-pointer items-center gap-2 py-1.5">
  <Checkbox checked={value} onChange={setValue} ariaLabel={t(labelKey)} />
  <span className="typography-ui-label">{t(labelKey)}</span>
</div>

Preserve row click and keyboard behavior when the container is interactive.

Optional Numeric Override

Empty means “inherit/default.” Provide fallback stepping and explicit clear:

<NumberInput
  value={temperature}
  fallbackValue={0.7}
  onValueChange={setTemperature}
  onClear={() => setTemperature(undefined)}
  min={0}
  max={2}
  step={0.1}
  inputMode="decimal"
  emptyLabel="—"
/>

Keep reset adjacent. Prefer an info tooltip over persistent helper text when the explanation is secondary.

Inputs And Icon Actions

<div className="flex items-center gap-2">
  <Input className="h-7" />
  <Button variant="outline" size="icon" aria-label={t(browseLabelKey)}>
    <Icon name="folder" className="size-4" />
  </Button>
</div>

• Prefer compact inputs in dense rows.
• Avoid large select triggers in Settings.
• Use shared Button and sprite Icon, never wrapper buttons or direct Remixicon imports.

Mobile Constraints

• packages/ui/src/styles/mobile.css may force .overflow-hidden to scroll; use explicit x/y clipping only when required.
• Touch CSS enforces minimum button height. Do not put custom segmented buttons in a container too short for them.

Picker Rows

• Place icon/color palettes beneath their label.
• Keep option dimensions and gaps consistent.
• Use stable border/ring/background selection; avoid scale transforms that shift layout.