---
title: "Custom NumPad"
slug: "custom-numpad"
category: "Widgets"
reactComponent: "ArcWidgetNumpad"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "numpad.tsx"
locale: "es"
hosts: "react"
---

# Numpad en React

Introduce números mediante un teclado en pantalla, por ejemplo cantidades o importes. El resultado se mantiene primero como un string formateado.

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 { ArcWidgetNumpad } 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 [value, setValue] = useState('0');
  return (
    <>
      <div style={{ width: 280, height: 360 }}>
        <ArcWidgetNumpad
          id="quantity"
          data={{
            currentValue: value,
            actionTitle: t('Übernehmen', 'Apply', 'Aplicar'),
            maxDecimals: 2,
            suffix: t('Stk', 'pcs', 'uds'),
            keyboard: false,
          }}
          onSubmit={setValue}
        />
      </div>
      <p aria-live="polite">
        {t('Übernommen', 'Committed', 'Confirmado')}: {value}
      </p>
    </>
  );
}
```

## Props del componente

### id

ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.

### data

Configuración de tipo `ArcWidgetNumpadData`. 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).

### onSubmit

String de entrada confirmado.

```typescript
onSubmit?: (value: string) => 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.

### currentValue

Valor actual mostrado.

Tipo: `string | number`.

### actionTitle

Etiqueta de la confirmación.

Tipo: `string`.

### backgroundColor

Color de fondo.

Tipo: `string`.

### fontColor

Color del texto.

Tipo: `string`.

### display

Representación del display numérico.

Tipo: `ArcWidgetNumpadDisplay`.

### suffix

Contenido tras la etiqueta o unidad.

Tipo: `string`.

### clearOnFirstInput

Reemplaza el valor anterior en la primera entrada.

Tipo: `boolean`.

### decimalSeparator

Separador decimal del string de entrada.

Tipo: `string`.

### maxDecimals

Número máximo de decimales.

Tipo: `number`.

### keyboard

Manejo mediante el teclado físico.

Tipo: `boolean | ArcWidgetNumpadKeyboard`.

## Comportamiento y límites

- `onSubmit` entrega un string, p. ej. `"12,50"`. Normaliza el separador decimal configurado antes de un cálculo numérico y comprueba el resultado.

- `currentValue` rellena el display. `clearOnFirstInput` es útil al sobrescribir un valor existente.

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 ArcWidgetNumpadDisplay {
	fontColor?: string;
	height?: string;
}

export interface ArcWidgetNumpadKeyboard {
	enabled?: boolean;
	submitOnEnter?: boolean;
}

export interface ArcWidgetNumpadData extends Omit<ArcWidgetBaseData, 'actions'> {
	currentValue?: string | number;
	actionTitle?: string;
	backgroundColor?: string;
	fontColor?: string;
	display?: ArcWidgetNumpadDisplay;
	suffix?: string;
	clearOnFirstInput?: boolean;
	decimalSeparator?: string;
	maxDecimals?: number;
	keyboard?: boolean | ArcWidgetNumpadKeyboard;
}

export interface ArcWidgetNumpadProps extends ArcReactWidgetProps<ArcWidgetNumpadData> {
	onSubmit?: (value: string) => void;
}
```