NumberField

Das NumberField erlaubt die Eingabe und schrittweise Anpassung von Zahlen.

Alter(optional)

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

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

Best Practices

Definiere Mindest- und Höchstwerte (minValue/maxValue) sinnvoll, wenn du Eingaben einschränken willst.
Formuliere das Label‍ prägnant und leicht verständlich.
Formuliere Fehlermeldungen‍ klar, hilfreich und lösungsorientiert.

Einheit

Über das Property formatOptions lassen sich Einheiten für das NumberField definieren (s. Intl.NumberFormat‍).

Speicherplatz(optional)

Validierung

Nutze für die Validierung React Hook Form‍. Alternativ stehen aber auch 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

Disabled

Achte bei der Verwendung von Disabled darauf, dass aus dem Kontext klar wird, warum der User gerade nicht mit dem NumberField interagieren kann.

Alter(optional)

Kombiniere mit ...

Combine

Benutze die Combine‍-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	Description
`autoFocus`	boolean	Whether the element should receive focus on render.
`children`	ReactNode
`className`	ClassNameOrFunction<NumberFieldRenderProps>default: '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.
`commitBehavior`	validate \| snap (default)	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.
`decrementAriaLabel`	string	A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used.
`defaultValue`	TimeValue	The default value (uncontrolled).
`dir`	string
`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).
`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.
`hidden`	boolean
`id`	string	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`incrementAriaLabel`	string	A custom aria-label for the increment button. If not provided, the localized string "Increment" is used.
`inert`	boolean
`isDisabled`	boolean	Whether the input is disabled.
`isInvalid`	boolean	Whether the input value is invalid.
`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.
`isWheelDisabled`	boolean	Enables or disables changing the value with scroll.
`lang`	string
`maxValue`	number	The largest value allowed for the input.
`minValue`	number	The smallest value allowed for the input.
`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).
`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.
`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".
`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.
`translate`	yes \| no
`validate`	((value: TimeValue) => true \| ValidationError \| null)	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.
`validationBehavior`	native (default) \| aria	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.
`value`	TimeValue	The current value (controlled).
`wrapWith`	ReactElement<unknown, string \| JSXElementConstructor<any>>	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Events

Property	Type	Description
`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).
`onBlur`	((e: FocusEvent<Element, Element>) => void)	Handler that is called when the element loses focus.
`onChange`	((value: TimeValue \| null) => void)	Handler that is called when the value changes.
`onClick`	MouseEventHandler<HTMLDivElement>
`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).
`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).
`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).
`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).
`onFocus`	((e: FocusEvent<Element, Element>) => void)	Handler that is called when the element receives focus.
`onFocusChange`	((isFocused: boolean) => void)	Handler that is called when the element's focus status changes.
`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).
`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.
`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).
`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).

Accessibility

Property	Type	Description
`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.
`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.

Components

Integrations

NumberField

Best Practices

Einheit

Validierung

Required

Invalid

Mit FieldDescription

Disabled

Kombiniere mit ...

Combine

ContextualHelp

React Hook Form

Properties

Events

Accessibility

Auf dieser Seite