Interruttore · sitelo UI

Un interruttore è per un’impostazione che si applica appena viene mossa. Una casella di controllo è per una scelta che confermi dopo, con un pulsante di invio. Se il tuo controllo sta in un form con un Salva in fondo, è una casella di controllo.

Il componente si chiama toggle() invece di switch() per un motivo noioso ma inevitabile: switch è una parola riservata, quindi non può essere un binding di import. Sotto è un vero <input type="checkbox"> che porta role="switch".

Interruttore di base

Sito pubblicoAcceso

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Sito pubblico', name: 'public' }),
  toggle({ label: 'Acceso', name: 'on', checked: true }),
)

Colori

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

Disattivato

Spento, e bloccatoAcceso, e bloccato

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Spento, e bloccato', disabled: true }),
  toggle({ label: 'Acceso, e bloccato', checked: true, disabled: true }),
)

Senza etichetta

Un interruttore senza etichetta visibile ha comunque bisogno di un nome accessibile. Passa aria-label — arriva fino all’input.

Un elenco di impostazioni

La forma consueta: l’etichetta a sinistra, l’interruttore a destra, una riga per impostazione.

Ricerca Pagefind
Indicizza ogni pagina alla fine della build.
Ottimizzazione immagini
Ridimensiona e converte le immagini in fase di build. Richiede sharp.
Island server
Renderizza le regioni marcate al momento della richiesta.

return list(
  [
    ['Ricerca Pagefind', 'Indicizza ogni pagina alla fine della build.', true],
    ['Ottimizzazione immagini', 'Ridimensiona e converte le immagini in fase di build. Richiede sharp.', true],
    ['Island server', 'Renderizza le regioni marcate al momento della richiesta.', false],
  ].map(([name, description, on]) =>
    listItem({
      title: name,
      description,
      end: toggle({ 'aria-label': name, checked: on }),
    }),
  ),
)

Props

Prop	Tipo	Predefinito	Descrizione
`label`	`Child`	—	Testo accanto all’interruttore. Usa aria-label quando non ce n’è.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Colore della barra quando è acceso.
`checked`	`boolean`	`false`	Se parte acceso.
`name`	`string`	—	Nome del campo del form.
`disabled`	`boolean`	`false`	Disattiva l’input e attenua la riga.