Copy page

Components

SwitchField

src/lib/components/ui/switch-field/switch-field.svelte

Purpose

SwitchField is the only standard for a labelled boolean switch in a form. The canonical order is switch FIRST, label immediately after:

Code
[Switch] Label [?]

Field help goes in the label tooltip (tooltip props) — the optional description sublabel is deprecated (hint standard: no inline hint lines).

Never use the label-left / switch-right (justify-between) layout, and never hand-roll Switch + <span> markup in a form — that is what SwitchField enforces.

The bare Switch component is reserved for composite widgets that own their labelling (ConfigValueInput, toolbar toggles like the AND/OR connector, thumbIcons toggles).

Usage

Code
<SwitchField
  id="enable-thinking"
  bind:checked={enable_thinking}
  label={$t('fields.enable_thinking')}
  tooltip={$t('fields.enable_thinking_help')}
  tooltipPriority="INFORMATION"
  data-testid="cerebellum-thinking"
/>

For external stores that cannot use bind: (superForm, builders), use checked + onCheckedChange:

Code
<SwitchField
  checked={$form.reserved}
  onCheckedChange={(c) => ($form.reserved = c)}
  label={$t('...reserved')}
  tooltip={$t('...reservedHelp')}
  tooltipPriority="INFORMATION"
/>

Props

Prop	Type	Purpose
checked	boolean (bindable)	switch state
onCheckedChange	(checked: boolean) => void	alternative to bind: for external stores
label	string	label rendered right after the switch
description	string	deprecated — muted sublabel under the row; use tooltip instead
tooltip	string	optional help text; renders a ? FormLabelWithPriorityHelp inside the label
tooltipTitle	string	optional tooltip heading
tooltipPriority	TooltipPriority	optional priority-styled tooltip content
tooltipLabelKey	string	optional muted italic i18n key next to the ? icon
disabled	boolean	disables the switch (label gets peer-disabled styling)
size	'default' | 'sm'	label density — default: text-sm font-medium (form pages); sm: text-xs font-medium text-muted-foreground (dense sheets). Layout only, never affects colors/gradients
id	string	forwarded to the switch so the external <label for> works
data-testid	string	on the wrapper; the inner switch gets <testid>-switch

Canonical uses: AiCerebellumPanel (all boolean fields), configurations/create (Reserved), ValidationRulesSection (required/unsigned), regex-flags-panel.