componente · @solu30/ui-kit/input

ChipToggle

Chip de encendido y apagado con ícono y descripción, que se marca al instante y revierte si falla.

Seguir leyendo — 3 párrafos más

Toggle chip with optimistic UI, async support, and accessibility.

Flips visual state immediately on click. If onChange returns a Promise that rejects, the visual state reverts and onError is called.

Uses CSS variables for theming:

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

El componente, montado

Cargando el componente del paquete instalado…

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

9 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
label	sí	`string`	Display label
checked	sí	`boolean`	Controlled checked state
onChange	sí	`(checked: boolean) => void \| Promise<void>`	Sync or async toggle handler. On promise rejection, visual state reverts.
icon	opcional	`React__default.ReactNode`	Optional leading icon
disabled	opcional	`boolean`	Disable interaction
loading	opcional	`boolean`	Show loading spinner (overrides internal async loading)
description	opcional	`string`	Optional description text below the label
className	opcional	`string`	Additional CSS class
onError	opcional	`(error: unknown) => void`	Called when an async onChange rejects

<ChipToggle
  label="Wi-Fi"
  checked={hasWifi}
  onChange={async (v) => { await updateAmenity('wifi', v) }}
  icon={<WifiIcon />}
/>

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.