NumberField

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

Grundlagen

Best Practices

Achte bei der Verwendung eines NumberFields darauf, dass ...

bei Bedarf eine Einheit über formatOptions ergänzt wird.
Mindest- und Höchstwerte (minValue/maxValue) sinnvoll definiert sind, wenn Eingaben eingeschränkt werden sollen.
das Label prägnant und leicht verständlich ist.
die FieldDescription genutzt wird, um Beispiele oder Formatierungshinweise bereitzustellen.
Fehlermeldungen klar, hilfreich und lösungsorientiert formuliert sind.

Verwendung

Verwende ein NumberField, um Eingaben zu ermöglichen, die ausschließlich aus Zahlen bestehen (z. B. Alter, Menge, Preis).

Playground

Verwende <NumberField />, um ein NumberField darzustellen. Platziere innerhalb davon ein <Label />, um die Eingabeanforderung kurz in einem Label zu beschreiben.

Alter(optional)

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).

Speicherplatz(optional)

Disabled

Ist das NumberField disabled, ist keine Interaktion möglich. Sobald die Ursache behoben ist, kann es wieder wie gewohnt verwendet werden.

Alter(optional)

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

Alter

Invalid

Alter(optional)Ungültige Eingabe

Mit FieldDescription

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

Alter(optional)Du musst mindestens 18 Jahre alt sein

Kombiniere mit ...

Align

Benutze die Align-Component, um andere Components wie einen Button neben dem NumberField auszurichten.

Alter(optional)

ContextualHelp

Verwende ContextualHelp, um zusätzliche Informationen bereitzustellen, die über den Umfang der FieldDescription hinausgehen.

Alter(optional)

React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component Form (React Hook Form).

Properties

Property	Type	Default	Description
`className`	`ClassNameOrFunction<NumberFieldRenderProps>`	'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<TooltipRenderProps>`	-	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 `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`dir`	`string`	-
`lang`	`string`	-
`hidden`	`boolean`	-
`inert`	`boolean`	-
`translate`	`"yes" \| "no"`	-
`validationBehavior`	`"native" \| "aria"`	'native'	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
`minValue`	`number`	-	The smallest value allowed for the input.
`maxValue`	`number`	-	The largest value allowed for the input.
`isDisabled`	`boolean`	-	Whether the input is disabled.
`isReadOnly`	`boolean`	-	Whether the input can be selected but not changed by the user.
`isRequired`	`boolean`	-	Whether user input is required on the input before form submission.
`isInvalid`	`boolean`	-	Whether the input value is invalid.
`validate`	`((value: TimeValue) => true \| ValidationError)`	-	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
`autoFocus`	`boolean`	-	Whether the element should receive focus on render.
`value`	`TimeValue`	-	The current value (controlled).
`defaultValue`	`TimeValue`	-	The default value (uncontrolled).
`id`	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`name`	`string`	-	The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
`form`	`string`	-	The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
`slot`	`string`	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
`step`	`number`	-	The amount that the input value changes with each increment or decrement "tick".
`formatOptions`	`NumberFormatOptions`	-	Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.
`decrementAriaLabel`	`string`	-	A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used.
`incrementAriaLabel`	`string`	-	A custom aria-label for the increment button. If not provided, the localized string "Increment" is used.
`isWheelDisabled`	`boolean`	-	Enables or disables changing the value with scroll.
`commitBehavior`	`"validate" \| "snap"`	'snap'	Controls the behavior of the number field when the user blurs the field after editing. 'snap' will clamp the value to the min/max values, and snap to the nearest step value. 'validate' will not clamp the value, and will validate that the value is within the min/max range and on a valid step.
`children`	`ReactNode`	-
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`ref`	`Ref<HTMLSpanElement>`	-	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
`key`	`Key`	-

Events

Property	Type	Default	Description
`onClick`	`MouseEventHandler<HTMLDivElement>`	-
`onClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClick`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenu`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenuCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClick`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDown`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDownCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseEnter`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseLeave`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMove`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMoveCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOut`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOutCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOver`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOverCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUp`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUpCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onTouchCancel`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchCancelCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEnd`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEndCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMove`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMoveCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStart`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStartCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onPointerDown`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerDownCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMove`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMoveCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUp`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUpCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancel`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancelCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerEnter`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerLeave`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOver`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOverCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOut`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOutCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCaptureCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCaptureCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onScroll`	`UIEventHandler<HTMLDivElement>`	-
`onScrollCapture`	`UIEventHandler<HTMLDivElement>`	-
`onWheel`	`WheelEventHandler<HTMLDivElement>`	-
`onWheelCapture`	`WheelEventHandler<HTMLDivElement>`	-
`onAnimationStart`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationStartCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEnd`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEndCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIteration`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIterationCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onTransitionCancel`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionCancelCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEnd`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEndCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRun`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRunCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStart`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStartCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onFocus`	`((e: FocusEvent<Element, Element>) => void)`	-	Handler that is called when the element receives focus.
`onBlur`	`((e: FocusEvent<Element, Element>) => void)`	-	Handler that is called when the element loses focus.
`onFocusChange`	`((isFocused: boolean) => void)`	-	Handler that is called when the element's focus status changes.
`onKeyDown`	`((e: KeyboardEvent) => void)`	-	Handler that is called when a key is pressed.
`onKeyUp`	`((e: KeyboardEvent) => void)`	-	Handler that is called when a key is released.
`onChange`	`((value: TimeValue) => void)`	-	Handler that is called when the value changes.
`onCopy`	`ClipboardEventHandler<HTMLInputElement>`	-	Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
`onCut`	`ClipboardEventHandler<HTMLInputElement>`	-	Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).
`onPaste`	`ClipboardEventHandler<HTMLInputElement>`	-	Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).
`onCompositionStart`	`CompositionEventHandler<HTMLInputElement>`	-	Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
`onCompositionEnd`	`CompositionEventHandler<HTMLInputElement>`	-	Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
`onCompositionUpdate`	`CompositionEventHandler<HTMLInputElement>`	-	Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
`onSelect`	`ReactEventHandler<HTMLInputElement>`	-	Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).
`onBeforeInput`	`FormEventHandler<HTMLInputElement>`	-	Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
`onInput`	`FormEventHandler<HTMLInputElement>`	-	Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).

Accessibility

Property	Type	Default	Description
`aria-label`	`string`	-	Defines a string value that labels the current element.
`aria-labelledby`	`string`	-	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	-	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.

NumberField

Grundlagen

Best Practices

Verwendung

Playground

Einheit

Disabled

Validierung

Required

Invalid

Mit FieldDescription

Kombiniere mit ...

Align

ContextualHelp

React Hook Form

Properties

Events

Accessibility

Auf dieser Seite