# NumberField
Das NumberField unterstützt die direkte Eingabe numerischer Werte sowie die schrittweise manuelle Anpassung.
## Overview
# Playground
Verwende ``, um ein NumberField darzustellen. Platziere innerhalb
davon ein ``, um die Eingabeanforderung kurz in einem
[Label](/04-components/content/label/overview) zu beschreiben.
```tsx
import {
Label,
NumberField,
} from "@mittwald/flow-react-components";
```
---
# Einheit
Über das Property `formatOptions` lassen sich Einheiten für das NumberField
definieren (s.
[Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)).
```tsx
import {
Label,
NumberField,
} from "@mittwald/flow-react-components";
```
---
# Disabled
Ist das NumberField **disabled**, ist keine Interaktion möglich. Sobald die
Ursache behoben ist, kann es wieder wie gewohnt verwendet werden.
```tsx
import {
Label,
NumberField,
} from "@mittwald/flow-react-components";
```
---
# Validierung
Um das NumberField zu validieren, stehen folgende Properties zur Verfügung:
- `isRequired` für Pflichtfelder.
- `validate` für eigene Validierungen.
Bei ungültiger Eingabe wird das NumberField invalidiert. Über ``
kann eine entsprechende Fehlermeldung ausgegeben werden.
## Required
```tsx
import {
Label,
NumberField,
} from "@mittwald/flow-react-components";
```
## Invalid
```tsx
import {
FieldError,
Label,
NumberField,
} from "@mittwald/flow-react-components";
Ungültige Eingabe
```
---
# Mit FieldDescription
Um wichtige Hinweise zum NumberField bereitzustellen, kann unterhalb eine
`` eingebaut werden.
```tsx
import {
FieldDescription,
Label,
NumberField,
} from "@mittwald/flow-react-components";
Du musst mindestens 18 Jahre alt sein
```
---
# Kombiniere mit ...
## Align
Benutze die [Align](/04-components/structure/align/overview)-Component, um
andere Components wie einen [Button](/04-components/actions/button/overview)
neben dem NumberField auszurichten.
```tsx
import {
Align,
Button,
Label,
NumberField,
} from "@mittwald/flow-react-components";
```
## ContextualHelp
Verwende [ContextualHelp](/04-components/overlays/contextual-help/overview), um
zusätzliche Informationen bereitzustellen, die über den Umfang der
FieldDescription hinausgehen.
```tsx
import {
Button,
ContextualHelp,
ContextualHelpTrigger,
Heading,
Label,
NumberField,
Text,
} from "@mittwald/flow-react-components";
```
## React Hook Form
Weitere Details zur Formularlogik und -validierung findest du in der Component
[Form (React Hook Form)](/04-components/react-hook-form/form/overview).
```tsx
import {
Label,
NumberField,
Section,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
Form,
SubmitButton,
typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/04-components/actions/action/examples/lib";
export default () => {
const form = useForm<{ age: number }>();
const Field = typedField(form);
return (
);
}
```
## Develop
# Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `translate` | `"yes" \| "no"` | - | - |
| `className` | `ClassNameOrFunction` | `'react-aria-NumberField'` | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| `style` | `StyleOrFunction` | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| `render` | `DOMRenderFunction<"div", TooltipRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `