componente · @solu30/ui-kit/input

Checkbox

El componente, montado

Cargando el espécimen…

Cargando el chunk del paquete instalado…

De dónde se importa

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

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.

Ejemplo del paquete

/
icon?: React__default.ReactNode;
/**
External loading state. When true, disables interaction and shows a
loading indicator inside the checkbox box.
/
isLoading?: boolean;
}
/**
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
// 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. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.