--- title: "Input" slug: "input" category: "Mini Widgets" reactComponent: "ArcWidgetInput" reactTier: "mini" reactSince: "0.1.0-alpha.5" reactExample: "input.tsx" locale: "es" hosts: "react" --- # Input en React Captura texto, números, fecha o hora. El ejemplo filtra mediante el estado de React y muestra la respuesta al confirmar o restablecer. Referencia para `@arcrider/arcwidgets-react@0.1.0-alpha.5`. [Instalación](/docs/react/intro/setup-react) · [Todos los componentes](/docs/react/intro/react-components). ## Ejemplo completo ```tsx import { ArcWidgetInput } from '@arcrider/arcwidgets-react'; import { useState } from 'react'; const lang = document.documentElement.lang.startsWith('en') ? 'en' : document.documentElement.lang.startsWith('es') ? 'es' : 'de'; const t = (de: string, en: string, es: string) => lang === 'en' ? en : lang === 'es' ? es : de; export default function Example() { const [query, setQuery] = useState(''); const [last, setLast] = useState(''); return ( <> setQuery(String(value ?? ''))} onActions={(_value, source) => setLast(source)} />

{t('Suche', 'Search', 'Búsqueda')}: {query || t('Alle', 'All', 'Todos')}{' '} · {t('Letztes Ereignis', 'Last event', 'Último evento')}: {last || '–'}

); } ``` ## Props del componente ### id ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID. ### data Configuración de tipo `ArcWidgetInputData`. Pasa los cambios como objetos nuevos; gestiona los datos de negocio y la selección en el estado de React. ### onAction Fallback opcional `(type: string, ...args: unknown[]) => unknown`. El callback concreto tiene prioridad. Detalles: [Estado y eventos](/docs/react/patterns/react-state-events). ### onChange Adopta el nuevo valor de entrada en tu estado. ```typescript onChange?: (value: string | number | null) => void | Promise; ``` ### onActions Notifica la confirmación o el restablecimiento. El valor es un string; `source` distingue ambos procesos. ```typescript onActions?: (value: string, source: 'submit' | 'reset') => void; ``` ## Configuración Los siguientes campos pertenecen a `data`. Los tamaños se indican como strings, los números y valores de tiempo según su tipo respectivo. ### title Etiqueta; como slot también es posible con JSX. Tipo: `ArcWidgetSlot`. ### placeholder Aviso cuando el valor está vacío. Tipo: `string`. ### type Tipo de entrada. En el ejemplo se usa texto. Tipo: `'text' | 'number' | 'date' | 'time' | 'textarea' | string`. ### value Valor a mostrar o actualmente en edición. Tipo: `unknown`. ### disabled Desactiva la entrada. Tipo: `boolean`. ### tempStorage Suprime el callback de cambio; solo para valores mantenidos deliberadamente en local. Tipo: `boolean`. ### suffix Contenido después de la etiqueta o unidad. Tipo: `ArcWidgetSlot`. ### width Ancho del widget como valor de tamaño. Tipo: `string`. ### height Alto del widget, p. ej. `"320px"`. Los valores en porcentaje necesitan un contenedor padre con altura fija. Tipo: `string`. ### alignX Alineación horizontal. Tipo: `string`. ### paddingX Espaciado interno a izquierda y derecha. Tipo: `string`. ### paddingY Espaciado interno arriba y abajo. Tipo: `string`. ### fontColor Color de la fuente. Tipo: `string`. ### fontSize Tamaño de fuente como valor CSS. Tipo: `string`. ### fontWeight Grosor de la fuente. Tipo: `string | number`. ### backgroundColor Color de fondo. Tipo: `string`. ### borderWidth Grosor del borde. Tipo: `string`. ### borderColor Color del borde. Tipo: `string`. ### borderRadius Redondeo de las esquinas. Tipo: `string`. ### autocomplete Autocompletado de la entrada. Tipo: `boolean`. ### editable Editabilidad del contenido. Tipo: `boolean`. ### focusAction Ajustes al enfocar, por ejemplo `autoFocus`. Tipo: `{ autoFocus?: boolean; [key: string]: unknown }`. ### placeholderSettings Texto y presentación del campo vacío. Tipo: `ArcWidgetInputPlaceholderSettings`. ### labelSettings Etiqueta y su alineación. Tipo: `ArcWidgetInputLabelSettings`. ### numberFormat Decimales y separadores para números. Tipo: `ArcWidgetInputNumberFormat`. ### numpad Teclado en pantalla para entradas numéricas. Tipo: `ArcWidgetInputNumpad`. ### reset Configuración de la función de restablecimiento. Tipo: `ArcWidgetInputReset`. ### timeSettings Rango horario y rejilla; las unidades son milisegundos. Tipo: `{ format?: string; minuteStep?: number; showNow?: boolean; [key: string]: unknown }`. ### liveUpdate Adopción continua al escribir texto, opcionalmente con retraso (`debounce`) y longitud mínima. Tipo: `boolean | { debounce?: number; minLength?: number; actions?: boolean; [key: string]: unknown }`. ## Comportamiento y límites - `onChange` entrega el nuevo valor; `onActions(value, source)` notifica confirmación o reset con `source: "submit" | "reset"`. - Para búsquedas es adecuado `liveUpdate: { debounce: 200, minLength: 0 }`. Sin live-update se adopta al confirmar o salir del campo. - Con `tempStorage: true` el valor permanece local en el widget y `onChange` no se dispara; usa esto solo de forma deliberada. - El numpad numérico confirma mediante Fertig, blur o Enter. `liveUpdate` no actúa ahí como en texto. `reset` debe configurarse para un reset visible. Los campos `ArcWidgetSlot` admitidos permiten elementos JSX individuales, texto o descriptores de widget. Pasa texto externo como texto JSX; los strings HTML se interpretan como HTML. [Combinar contenidos](/docs/react/patterns/nested-widget-descriptors). ## Tipos de datos Estos tipos relacionados con el widget se exportan desde el paquete. También están disponibles tipos comunes como `ArcWidgetSlot`, `ArcWidgetStyles` y `ArcReactWidgetProps`. Las firmas de índice permiten extensiones; no garantizan que el widget evalúe campos arbitrarios. ```typescript export interface ArcWidgetInputReset { title?: ArcWidgetSlot; hide?: boolean; visible?: boolean; value?: unknown; icon?: ArcWidgetSlot; color?: string; backgroundColor?: string; borderRadius?: string; [key: string]: unknown; } export interface ArcWidgetInputNumberFormat { digits?: number; decimalSeparator?: string; thousandSeparator?: string; } export interface ArcWidgetInputNumpad { enabled?: boolean; size?: string; openOnFocus?: boolean; allowNegative?: boolean; maxDecimals?: number; suffix?: string; [key: string]: unknown; } export interface ArcWidgetInputPlaceholderSettings { value?: string; fontColor?: string; backgroundColor?: string; [key: string]: unknown; } export interface ArcWidgetInputLabelSettings { title?: ArcWidgetSlot; fontSize?: string; fontColor?: string; alignX?: string; gap?: string; [key: string]: unknown; } export interface ArcWidgetInputData extends Omit { title?: ArcWidgetSlot; placeholder?: string; type?: 'text' | 'number' | 'date' | 'time' | 'textarea' | string; value?: unknown; disabled?: boolean; tempStorage?: boolean; suffix?: ArcWidgetSlot; width?: string; height?: string; alignX?: string; paddingX?: string; paddingY?: string; fontColor?: string; fontSize?: string; fontWeight?: string | number; backgroundColor?: string; borderWidth?: string; borderColor?: string; borderRadius?: string; autocomplete?: boolean; editable?: boolean; focusAction?: { autoFocus?: boolean; [key: string]: unknown }; placeholderSettings?: ArcWidgetInputPlaceholderSettings; labelSettings?: ArcWidgetInputLabelSettings; numberFormat?: ArcWidgetInputNumberFormat; numpad?: ArcWidgetInputNumpad; reset?: ArcWidgetInputReset; timeSettings?: { format?: string; minuteStep?: number; showNow?: boolean; [key: string]: unknown }; liveUpdate?: boolean | { debounce?: number; minLength?: number; actions?: boolean; [key: string]: unknown }; } export interface ArcWidgetInputProps extends ArcReactWidgetProps { onChange?: (value: string | number | null) => void | Promise; onActions?: (value: string, source: 'submit' | 'reset') => void; } ```