Checkbox

Casilla para activar opciones independientes, con etiqueta y texto de apoyo.

Cuándo usarlo

Props. label, hint, checked / defaultChecked, onChange, indeterminate, size (sm 16px · md 20px), disabled.

Visual. Marcada: bg-brand-solid con check blanco de 1,67px. Sin marcar: borde border-primary. Etiqueta text-secondary medium; apoyo text-tertiary. La caja baja 2px para alinearse con la primera línea.

Por dentro. Es un <input type="checkbox"> nativo: espacio para marcar, envío en formularios y required. indeterminate marca la propiedad del DOM y aria-checked="mixed".

Ejemplos

RecordarmeMantener la sesión 30 días.Selección parcialOpción mdDeshabilitado

Props

Prop	Tipo	Por defecto	Descripción
`label`	`ReactNode`	—	Etiqueta junto a la casilla.
`hint`	`ReactNode`	—	Texto de apoyo bajo la etiqueta.
`indeterminate`	`boolean`	—	Selección parcial: guion en lugar de check y `aria-checked="mixed"`.
`size`	`"sm" · "md"`	`sm`	Caja de 16px (`sm`) o 20px (`md`).

Código

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

export default function Page() {
	return (
		<>
			<Checkbox label="Recordarme" hint="Mantén la sesión 30 días." />
		</>
	);
}

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

<Checkbox label="Recordarme" hint="Mantén la sesión 30 días." />

Sin directiva es una casilla nativa que se envía con el formulario. indeterminate y onChange necesitan una isla .tsx con client:load.