Files
fn-design-system/components/checkbox.md
T
Egutierrez 5a824c2eee initial: mirror of @fn_library from fn_registry
75 components + DESIGN_SYSTEM.md + sync script.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-21 19:06:49 +02:00

1.9 KiB

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant
name kind lang domain version purity signature description tags uses_functions uses_types returns returns_optional error_type imports output tested tests test_file_path file_path props emits has_state framework variant
checkbox component ts ui 1.0.0 impure Checkbox(props: CheckboxProps): JSX.Element Input booleano accesible con label opcional y variante indeterminate. Mantine Checkbox.
checkbox
component
ui
interactive
form
mantine
false
@mantine/core
Componente Checkbox que renderiza input booleano accesible con label opcional y estado indeterminate false
frontend/functions/ui/checkbox.tsx
name type required description
label string false Texto de etiqueta visible junto al checkbox
name type required description
indeterminate boolean false Estado indeterminate (guion) en vez de checked/unchecked
name type required description
checked boolean false Estado controlado del checkbox
name type required description
defaultChecked boolean false Estado inicial no controlado
name type required description
disabled boolean false Deshabilita el checkbox
name type required description
onCheckedChange (checked: boolean) => void false Callback cuando cambia el estado
onCheckedChange
false react

Ejemplo

// Basico
<Checkbox label="Acepto los terminos" />

// Controlado
<Checkbox
  label="Seleccionar todos"
  checked={allSelected}
  indeterminate={someSelected}
  onCheckedChange={setAllSelected}
/>

// Sin label
<Checkbox checked={isActive} onCheckedChange={setIsActive} />

Notas

Usa Mantine Checkbox para accesibilidad completa (keyboard, ARIA). El estado indeterminate se muestra con un guion horizontal. El callback onCheckedChange se adapta desde el onChange nativo de Mantine.