# NumberField

Das NumberField unterstützt die direkte Eingabe numerischer Werte sowie die schrittweise manuelle Anpassung.

## Overview

# Playground

Verwende `<NumberField />`, um ein NumberField darzustellen. Platziere innerhalb
davon ein `<Label />`, um die Eingabeanforderung kurz in einem
[Label](/04-components/content/label/overview) zu beschreiben.

```tsx
import {
  Label,
  NumberField,
} from "@mittwald/flow-react-components";

<NumberField minValue={0} maxValue={100}>
  <Label>Alter</Label>
</NumberField>
```

---

# 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";

<NumberField
  formatOptions={{
    style: "unit",
    unit: "gigabyte",
  }}
  defaultValue={12}
>
  <Label>Speicherplatz</Label>
</NumberField>
```

---

# 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";

<NumberField isDisabled>
  <Label>Alter</Label>
</NumberField>
```

---

# 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 `<FieldError />`
kann eine entsprechende Fehlermeldung ausgegeben werden.

## Required

```tsx
import {
  Label,
  NumberField,
} from "@mittwald/flow-react-components";

<NumberField isRequired>
  <Label>Alter</Label>
</NumberField>
```

## Invalid

```tsx
import {
  FieldError,
  Label,
  NumberField,
} from "@mittwald/flow-react-components";

<NumberField isInvalid value={-1}>
  <Label>Alter</Label>
  <FieldError>Ungültige Eingabe</FieldError>
</NumberField>
```

---

# Mit FieldDescription

Um wichtige Hinweise zum NumberField bereitzustellen, kann unterhalb eine
`<FieldDescription />` eingebaut werden.

```tsx
import {
  FieldDescription,
  Label,
  NumberField,
} from "@mittwald/flow-react-components";

<NumberField minValue={18} maxValue={100}>
  <Label>Alter</Label>
  <FieldDescription>
    Du musst mindestens 18 Jahre alt sein
  </FieldDescription>
</NumberField>
```

---

# 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";

<Align>
  <NumberField>
    <Label>Alter</Label>
  </NumberField>
  <Button>Hinzufügen</Button>
</Align>
```

## 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";

<NumberField minValue={0} maxValue={100}>
  <Label>
    Alter
    <ContextualHelpTrigger>
      <Button />
      <ContextualHelp>
        <Heading>Weitere Informationen</Heading>
        <Text>
          Hier gibt es weitere Informationen, die zu lang
          für die FieldDescription sind.
        </Text>
      </ContextualHelp>
    </ContextualHelpTrigger>
  </Label>
</NumberField>
```

## 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 (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="age"
          rules={{
            required: "Bitte gib dein Alter an",
          }}
        >
          <NumberField minValue={0}>
            <Label>Alter</Label>
          </NumberField>
        </Field>
        <SubmitButton>Speichern</SubmitButton>
      </Form>
    </Section>
  );
}
```