# How to open a numeric keyboard

> Choose between the native numeric keyboard, the built-in Keypad, or the calculator.

Source: https://crossfly.dev/docs/cookbook/forms/teclado-numerico — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# How to open a numeric keyboard

**Purpose.** Make the field open a numbers-only keyboard when it receives focus — the system's native numeric keyboard, CrossFly's built-in Keypad, or the calculator variant.

## APIs used
- `campo.keyboard(Keyboard.NUMERIC)` — fluent shortcut (equivalent to `setKeyboard`). Available types (enum `Keyboard`): `NONE`, `DEFAULT`, `NUMERIC`, `KEYPAD`, `CALCULATOR`, `DATE`, `TIME`.
- `campo.setKeyboard(Keyboard kbd)` — sets the keyboard. Passing `Keyboard.DEFAULT` makes the field adopt the keyboard implied by the current `EditMode` (`mode.getKeyboard()`).
- `campo.<TextFieldStyle>getStyle().mode(EditMode.NUMERIC)` — sets the numeric mode; as a side effect, `mode(...)` **always** derives the keyboard from the mode (`NUMERIC → NUMERIC`). To override it, call `keyboard(...)` AFTER `mode(...)`.

Which one to choose:

| Keyboard | Behavior |
|---|---|
| `NUMERIC` | Native OS numeric keyboard. On desktop it falls back to `KEYPAD`. |
| `KEYPAD` | CrossFly's `Keypad` component (built-in grid of keys). |
| `CALCULATOR` | `Keypad` in calculator mode (`isCalculator(true)`). |

> On desktop (`Device.platform.isDesktop()`), `NUMERIC` is automatically converted to `KEYPAD` in `showInput()`, since there is no native virtual keyboard.

## Complete example (copy, paste, and run)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // TextFieldStyle (config on the style)

/** Runnable main screen. Point the launcher (classname) and run: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // 1) Native numeric keyboard (KEYPAD on desktop)
      TextField idade = new TextField("");
      idade.caption("Idade");
      idade.<TextFieldStyle>getStyle().mode(EditMode.NUMERIC);

      // 2) Force the built-in Keypad, regardless of mode
      TextField pin = new TextField("");
      pin.caption("PIN");
      pin.keyboard(Keyboard.KEYPAD);

      // 3) Calculator
      TextField total = new TextField("");
      total.caption("Total");
      total.keyboard(Keyboard.CALCULATOR);

      Label resultado = new Label("");

      Button enviar = new Button("Enviar");
      enviar.onAction(o ->
         resultado.setText("Idade: " + idade.getText()
            + " · PIN: " + pin.getText()
            + " · Total: " + total.getText()));

      add(LAY_FILL, idade);
      add(LAY_FILL, pin);
      add(LAY_FILL, total);
      add(LAY_AUTO, enviar);
      add(LAY_FILL, resultado);
   }
}
```

> The snippet below shows **only the core**. To run it, place it in the `MainWindow` skeleton above.

## Minimal snippet
```java
import dev.crossfly.ui.*;
import dev.crossfly.ui.style.*;
import static dev.crossfly.ui.UIConstants.EditMode;
import static dev.crossfly.ui.UIConstants.Keyboard;

// 1) Native numeric keyboard (KEYPAD on desktop)
TextField idade = new TextField("");
idade.caption("Idade");
idade.<TextFieldStyle>getStyle().mode(EditMode.NUMERIC);

// 2) Force the built-in Keypad, regardless of mode
TextField pin = new TextField("");
pin.caption("PIN");
pin.keyboard(Keyboard.KEYPAD);

// 3) Calculator
TextField total = new TextField("");
total.keyboard(Keyboard.CALCULATOR);
```

To restrict input to digits in addition to opening the keyboard, combine it with `validChars` (see [Validate a field](/docs/cookbook/forms/validar-campo)):
```java
idade.<TextFieldStyle>getStyle()
   .mode(EditMode.NUMERIC)
   .validChars("0123456789")
   .maxLength(3);
```

## Dig deeper
- [Masks and keyboards](/docs/ui/forms-and-input/masks-and-keyboards) · [Keypad](/docs/ui/widgets/keypad)
- Sibling recipes: [Currency mask](/docs/cookbook/forms/mascara-moeda) · [Validate a field](/docs/cookbook/forms/validar-campo)
- Canonical source: Chapter 14 — Basic widgets · [Enums (UIConstants)](/docs/reference/enums-uiconstants)