Copy page

Components

SelectableFieldset

src/lib/components/ui/selectable-fieldset/SelectableFieldset.svelte

Purpose

The standard visual container for grouping related content inside cards and sheets: an uppercase gradient label (sky→indigo) sits on top of a border-primary-gradient rounded container.

Code
<SelectableFieldset label={$t('...execution_config')}>
  <div class="grid grid-cols-2 gap-3">…</div>
</SelectableFieldset>

Code
        ┌ LABEL (gradient, uppercase, over the border)
   ╭────┴──────────────────────╮
   │  grouped content          │
   ╰───────────────────────────╯

Props

Prop	Type	Purpose
label	string	uppercase gradient label overlapping the top border
children	Snippet	boxed content (space-y-3, px-3 pt-3 pb-3)
class	string	extra classes merged on the inner container

When to use

• Grouping fields inside a sheet/card (e.g. AiCerebellumPanel "Esecuzione").
• Grouped list sections (ConfigList groups, ModelCacheSection censused/orphaned model lists).

Do NOT hand-roll border + <span> label boxes — that produces divergent chrome; SelectableFieldset is the single pattern.

Fieldset family

Component	Role
SelectableFieldset	visual group box (this page)
SelectableRow	selectable row inside a fieldset list
SelectableToolbar	select-all/bulk toolbar for a fieldset list
form-fieldset (ui/form)	semantic formsnap fieldset for superforms — accessibility grouping, not visual chrome