TextField

Ein TextField ermöglicht die Texteingabe über die Tastatur.

URL(optional)Beginnt mit https://

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

<TextField>
  <Label>URL</Label>
  <FieldDescription>Beginnt mit https://</FieldDescription>
</TextField>

Best Practices

Nutze das TextField nur für einzeilige Eingaben. Für mehrzeilige Angaben eignet sich die TextArea‍.
Verwende für spezielle Eingabetypen das passende type Attribut. Für E-Mail-Adressen ist das zum Beispiel email.
Folge in einem Formular dem Forms-Pattern‍. Dort sind Labels, Hilfetexte, Platzhalter und Fehlermeldungen geregelt.

Value

Standardmäßig ist der Value eines TextFields leer. Es ist möglich dem TextField eine uncontrolled defaultValue mitzugeben. Es kann auch ein controlled value für das TextField gesetzt werden, um dieses über onChange zu updaten.

URL(optional)

Input Properties

Das TextField unterstützt die Standard-Properties eines HTML <input /> Feldes. (s. MDN‍)

E-Mail(optional)

Passwort

TextFields mit type="password" erhalten automatisch einen Button zum ein- und ausblenden des Passworts.

Passwort(optional)

Character Count

Über das showCharacterCount Property wird eine FieldDescription hinzugefügt, die aktuelle Anzahl der Zeichen und, falls angegeben, die maximale Zeichenanzahl anzeigt.

Benutzername(optional)

0/10 characters

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.
HTML Input Properties wie type="email", minLength.

Wenn die Benutzereingabe nicht den Anforderungen entspricht, wird das TextField invalidiert. Mittels <FieldError /> kann eine Fehlermeldung angezeigt werden.

URL(optional)

Das ist keine URL

Disabled

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

URL(optional)

Kombiniere mit ...

Combine

Benutze die Combine‍ Component, um einen Button‍ neben deinem TextField zu platzieren.

Weiterleitungsziel(optional)

Button

Du kannst einen Button zum TextField hinzufügen, um benutzerdefinierte Aktionen auszuführen.

Label(optional)

ContextualHelp

Benutze die ContextualHelp‍ Component, wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind.

URL(optional)

React Hook Form

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

Properties

Property	Type	Description
`autoComplete`	string	Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
`autoCorrect`	string	An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete).
`autoFocus`	boolean	Whether the element should receive focus on render.
`children`	ReactNode
`className`	ClassNameOrFunction<TextFieldRenderProps>default: 'react-aria-TextField'	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.
`defaultValue`	TimeValue	The default value (uncontrolled).
`dir`	string
`enterKeyHint`	enter \| done \| go \| next \| previous \| search \| send	An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).
`excludeFromTabOrder`	boolean	Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
`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).
`hidden`	boolean
`id`	string	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`inert`	boolean
`inputMode`	text \| none \| search \| url \| tel \| email \| numeric \| decimal	Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).
`isDisabled`	boolean	Whether the input is disabled.
`isInvalid`	boolean	Whether the 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.
`lang`	string
`maxLength`	number	The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).
`minLength`	number	The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).
`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).
`pattern`	string	Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).
`placeholder`	string	Temporary text that occupies the text input when it is empty. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder).
`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.
`showCharacterCount`	boolean	Whether a character count should be displayed inside the field description.
`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.
`spellCheck`	string	An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).
`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
`type`	text (default) \| search \| url \| tel \| email \| password \| (string & {})	The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).
`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-activedescendant`	string	Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
`aria-autocomplete`	list \| none \| inline \| both	Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
`aria-controls`	string	Identifies the element (or elements) whose contents or presence are controlled by 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.
`aria-errormessage`	string	Identifies the element that provides an error message for the object.
`aria-haspopup`	boolean \| false \| true \| menu \| listbox \| tree \| grid \| dialog	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
`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

TextField

Best Practices

Value

Input Properties

Passwort

Character Count

Validierung

Disabled

Kombiniere mit ...

Combine

Button

ContextualHelp

React Hook Form

Properties

Events

Accessibility

Auf dieser Seite