Interruptor · sitelo UI

Un interruptor es para un ajuste que se aplica en cuanto lo accionas. Una casilla es para una elección que confirmas después, con un botón de envío. Si tu control está en un formulario con un Guardar abajo, es una casilla.

El componente se llama toggle() y no switch() por una razón aburrida pero inevitable: switch es una palabra reservada y no puede ser un nombre de importación. Por debajo es un <input type="checkbox"> de verdad que lleva role="switch".

Interruptor básico

Sitio públicoEncendido

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Sitio público', name: 'public' }),
  toggle({ label: 'Encendido', name: 'on', checked: true }),
)

Colores

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

Deshabilitado

Apagado y bloqueadoEncendido y bloqueado

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Apagado y bloqueado', disabled: true }),
  toggle({ label: 'Encendido y bloqueado', checked: true, disabled: true }),
)

Sin etiqueta

Un interruptor sin etiqueta visible sigue necesitando un nombre accesible. Pasa aria-label: cae directo al input.

Una lista de ajustes

La forma habitual: la etiqueta a la izquierda, el interruptor a la derecha, una fila por ajuste.

Búsqueda con Pagefind
Indexa todas las páginas al final de la compilación.
Optimización de imágenes
Redimensiona y convierte imágenes al compilar. Necesita sharp.
Islas de servidor
Renderiza las regiones marcadas al servir la petición.

return list(
  [
    ['Búsqueda con Pagefind', 'Indexa todas las páginas al final de la compilación.', true],
    ['Optimización de imágenes', 'Redimensiona y convierte imágenes al compilar. Necesita sharp.', true],
    ['Islas de servidor', 'Renderiza las regiones marcadas al servir la petición.', false],
  ].map(([name, description, on]) =>
    listItem({
      title: name,
      description,
      end: toggle({ 'aria-label': name, checked: on }),
    }),
  ),
)

Props

Prop	Tipo	Por defecto	Descripción
`label`	`Child`	—	Texto junto al interruptor. Usa aria-label cuando no haya ninguno.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Color del carril cuando está encendido.
`checked`	`boolean`	`false`	Si empieza encendido.
`name`	`string`	—	Nombre del campo en el formulario.
`disabled`	`boolean`	`false`	Deshabilita el input y atenúa la fila.

Todo lo demás cae al <input>, que es donde corresponden onchange y aria-*.