Interrupteur

Un interrupteur sert à un réglage qui s’applique dès qu’on le bascule. Une case à cocher sert à un choix que l’on confirme plus tard, avec un bouton d’envoi. Si votre contrôle est dans un formulaire avec un Enregistrer en bas, c’est une case à cocher.

Le composant s’appelle toggle() et non switch() pour une raison ennuyeuse mais incontournable : switch est un mot réservé et ne peut donc pas servir de nom d’import. En dessous, c’est un vrai <input type="checkbox"> portant role="switch".

Interrupteur de base

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Site public', name: 'public' }),
  toggle({ label: 'Activé', name: 'on', checked: true }),
)

Couleurs

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' }),
)

Désactivé

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Éteint et verrouillé', disabled: true }),
  toggle({ label: 'Allumé et verrouillé', checked: true, disabled: true }),
)

Sans libellé

Un interrupteur sans libellé visible a quand même besoin d’un nom accessible. Passez aria-label — il tombe sur l’input.

toggle({ 'aria-label': 'Activer la recherche Pagefind', checked: true })

Une liste de réglages

La forme habituelle : le libellé à gauche, l’interrupteur à droite, une rangée par réglage.

  • Recherche Pagefind
    Indexe chaque page à la fin du build.
  • Optimisation des images
    Redimensionne et convertit les images au build. Nécessite sharp.
  • Îlots serveur
    Rend les zones marquées au moment de la requête.
return list(
  [
    ['Recherche Pagefind', 'Indexe chaque page à la fin du build.', true],
    ['Optimisation des images', 'Redimensionne et convertit les images au build. Nécessite sharp.', true],
    ['Îlots serveur', 'Rend les zones marquées au moment de la requête.', false],
  ].map(([name, description, on]) =>
    listItem({
      title: name,
      description,
      end: toggle({ 'aria-label': name, checked: on }),
    }),
  ),
)

Props

PropTypeDéfautDescription
labelChild—Texte à côté de l’interrupteur. Utilisez aria-label s’il n’y en a pas.
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Couleur de la piste à l’état activé.
checkedbooleanfalseS’il démarre activé.
namestring—Nom du champ de formulaire.
disabledbooleanfalseDésactive l’input et atténue la rangée.

Tout le reste tombe sur l’<input>, là où onchange et aria-* ont leur place.