Files
fn_registry/frontend/functions/ui/checkbox.md
T
egutierrez 35bcb63300 feat: nuevos componentes UI — accordion, avatar, breadcrumb, checkbox, command, dropdown, pagination, popover, radio, sheet, select, switch, textarea, toast
Componentes React accesibles basados en Radix UI con soporte de temas via CSS variables. Incluye barrel export en index.ts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 03:23:32 +02:00

1.8 KiB

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, 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 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. Base-UI Checkbox primitive.
checkbox
component
ui
interactive
form
base-ui
cn_ts_core
false
@base-ui/react/checkbox
class-variance-authority
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 Base-UI Checkbox primitive para accesibilidad completa (keyboard, ARIA). El estado indeterminate se muestra con un guion horizontal. El id se genera automaticamente con useId si no se provee.