Toggle

Interruptor para ajustes que se aplican al momento, sin botón de guardar.

Cuándo usarlo

Props. label, hint, checked / defaultChecked, onChange(checked), size (sm 36×20 · md 44×24), disabled. Pista apagada bg-tertiary, encendida bg-brand-solid; mando fg-white con shadow-sm. Usa role="switch".

Toggle o Checkbox. Si el cambio necesita confirmar con un botón, es un Checkbox.

Ejemplos

NotificacionesRecibe un aviso al vencer un pago.Modo compactoDeshabilitado

Props

Prop	Tipo	Por defecto	Descripción
`label`	`ReactNode`	—	Etiqueta junto al interruptor.
`hint`	`ReactNode`	—	Texto de apoyo bajo la etiqueta.
`checked`	`boolean`	—
`defaultChecked`	`boolean`	—
`onChange`	`((checked: boolean) => void)`	—
`size`	`"sm" · "md"`	`sm`	Pista de 36×20 (`sm`) o 44×24 (`md`).
`disabled`	`boolean`	—
`name`	`string`	—	Nombre del campo al enviar el formulario.
`className`	`string`	—

Código

import { Toggle } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<Toggle label="Avisos por correo" defaultChecked />
		</>
	);
}

---
import { Toggle } from "@jotis-me/react";
---

<Toggle client:load label="Avisos por correo" defaultChecked />

onChange es una función y no cruza de Astro a una isla: envuélvelo en un .tsx y úsalo con client:load.