componente · @solu30/ui-kit/input

Checkbox

Casilla con etiqueta, descripción y estado de carga, que se marca al instante y revierte si el guardado falla.

Seguir leyendo — 2 párrafos más

Accessible checkbox component with custom SVG rendering, label support, async/optimistic onChange, icon slot, and loading state.

Uses CSS variables for theming:

--ui-accent for checked state background/border
--ui-border for unchecked border
--ui-content-primary for label text
--ui-content-secondary for help text

103 sitios de import en 10 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
carlosmartinpavon
cmp-packages
dietaly
elliot
gestorsalon
luigi
prepchat
raquetea
zentrya

El componente, montado

Cargando el espécimen…

Éste es el conjunto completo. Abajo, los mismos casos por separado, cada uno con su código.

Cómo se usa

import { Checkbox, CheckboxGroup } from '@solu30/ui-kit/input'

<Checkbox label="Confirmar la seña" checked={confirmada} onChange={setConfirmada} />

Anatomía

Las partes que componen Checkbox se importan del mismo subpath. Sueltas no significan nada: se montan siempre dentro de su padre.

Checkbox
└── CheckboxGroup

Props

11 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
checked	sí	`boolean`	Whether the checkbox is checked
onChange	opcional	`(checked: boolean, event?: React__default.ChangeEvent<HTMLInputElement>) => void \| Promise<void>`	Callback when the checkbox state changes. Supports sync and async — if a Promise is returned, optimistic UI is applied: the visual state flips immediately and reverts on rejection.
onCheckedChange	opcional	`(checked: boolean) => void \| Promise<void>`	Radix-compatible alias for onChange — accepts (checked: boolean)
label	opcional	`React__default.ReactNode`	Label for the checkbox
error	opcional	`string`	Error message to display
className	opcional	`string`	Additional CSS class
helpText	opcional	`string`	Help text to display below the checkbox
description	opcional	`string`	Description sub-label rendered below the main label (alias for helpText, mirrors the TCP bridge API for drop-in compatibility).
fullWidth	opcional	`boolean`	Whether the checkbox should take full width
icon	opcional	`React__default.ReactNode`	Optional icon rendered before the label text (emoji or React element). @example icon="🥗" @example icon={<Wifi size={18} />}
isLoading	opcional	`boolean`	External loading state. When true, disables interaction and shows a loading indicator inside the checkbox box.

Estados

Para ver de un vistazo los estados que un checkbox real atraviesa —marcado, desmarcado, deshabilitado, con descripción, cargando y con error— antes de armar un formulario con varios.

Cargando el espécimen…

export function CheckboxEstados() {
  return (
    <div className="flex flex-wrap items-start gap-6">
      <Checkbox label="Acepta transferencia" checked onChange={() => {}} />
      <Checkbox label="Requiere estacionamiento" checked={false} onChange={() => {}} />
      <Checkbox label="Pileta climatizada" checked disabled onChange={() => {}} />
      <Checkbox
        label="Menú vegano confirmado"
        description="El chef necesita la lista final 48h antes"
        checked={false}
        onChange={() => {}}
      />
      <Checkbox label="Guardando preferencia..." checked isLoading onChange={() => {}} />
      <Checkbox
        label="Términos de cancelación"
        checked={false}
        onChange={() => {}}
        error="Tenés que aceptar los términos para reservar"
      />
    </div>
  )
}

De specimens/input.tsx · CheckboxEstados: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Ejemplo del paquete

// Basic usage (unchanged)
<Checkbox
  label="Accept terms and conditions"
  checked={accepted}
  onChange={setAccepted}
/>

// Async / optimistic — visual flip is instant, reverts on error
<Checkbox
  label="Vegetarian"
  checked={dietaryVegetarian}
  onChange={async (checked) => {
    await api.savePreference('dietaryVegetarian', checked)
  }}
/>

// With icon slot
<Checkbox
  label="WiFi Included"
  icon={<Wifi size={18} />}
  checked={hasWifi}
  onChange={setHasWifi}
/>

// With description sub-label
<Checkbox
  label="Transfer Needed"
  description="Guest requires airport transfer"
  checked={transferNeeded}
  isLoading={isSaving}
  onChange={handleSave}
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.