Schalter

Ein Schalter ist für eine Einstellung, die gilt, sobald man ihn umlegt. Eine Checkbox ist für eine Wahl, die man später bestätigt, mit einem Absenden-Button. Sitzt dein Bedienelement in einem Formular mit einem Speichern unten, ist es eine Checkbox.

Die Komponente heißt toggle() und nicht switch(), aus einem langweiligen, aber unvermeidbaren Grund: switch ist ein reserviertes Wort und kann daher kein Import-Name sein. Darunter steckt ein echtes <input type="checkbox"> mit role="switch".

Einfacher Schalter

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Öffentliche Website', name: 'public' }),
  toggle({ label: 'An', name: 'on', checked: true }),
)

Farben

stack({ direction: 'row', gap: 'lg', wrap: true },
  toggle({ label: 'Primary', checked: true, color: 'primary' }),
  toggle({ label: 'Neutral', checked: true, color: 'neutral' }),
  toggle({ label: 'Success', checked: true, color: 'success' }),
  toggle({ label: 'Warning', checked: true, color: 'warning' }),
  toggle({ label: 'Danger', checked: true, color: 'danger' }),
)

Deaktiviert

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Aus und gesperrt', disabled: true }),
  toggle({ label: 'An und gesperrt', checked: true, disabled: true }),
)

Ohne Label

Ein Schalter ohne sichtbares Label braucht trotzdem einen zugänglichen Namen. Übergib aria-label — es fällt an das Input durch.

toggle({ 'aria-label': 'Pagefind-Suche aktivieren', checked: true })

Eine Einstellungsliste

Die übliche Form: das Label links, der Schalter rechts, eine Zeile pro Einstellung.

  • Pagefind-Suche
    Indexiert am Ende des Builds jede Seite.
  • Bildoptimierung
    Skaliert und konvertiert Bilder zur Build-Zeit. Braucht sharp.
  • Server-Islands
    Rendert markierte Bereiche zur Anfragezeit.
return list(
  [
    ['Pagefind-Suche', 'Indexiert am Ende des Builds jede Seite.', true],
    ['Bildoptimierung', 'Skaliert und konvertiert Bilder zur Build-Zeit. Braucht sharp.', true],
    ['Server-Islands', 'Rendert markierte Bereiche zur Anfragezeit.', false],
  ].map(([name, description, on]) =>
    listItem({
      title: name,
      description,
      end: toggle({ 'aria-label': name, checked: on }),
    }),
  ),
)

Props

PropTypStandardBeschreibung
labelChild—Text neben dem Schalter. Ohne ihn nimm aria-label.
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Farbe der Schiene im eingeschalteten Zustand.
checkedbooleanfalseOb er eingeschaltet startet.
namestring—Name des Formularfelds.
disabledbooleanfalseDeaktiviert das Input und dämpft die Zeile.

Alles Weitere fällt an das <input> durch — dorthin gehören auch onchange und aria-*.