TimeField

Mit dem TimeField können User eine konkrete Uhrzeit angeben.

––––

Uhrzeit(optional)

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

<TimeField>
  <Label>Uhrzeit</Label>
</TimeField>

Best Practices

Verwende ein verständliches Label‍ wie „Uhrzeit".
Wähle ein Zeitformat passend zum vertrauten Format des Users und zum Kontext.
Wähle sinnvolle Defaultwerte.
Schränke Eingaben bei Bedarf mit minValue und maxValue ein. So lässt du zum Beispiel nur Zeiten zwischen 8 und 16 Uhr zu.
Wähle die Genauigkeit über das granularity Property passend zur Nutzung. Für Erinnerungen genügen Stunden und Minuten, Sekunden wären unnötig.

Min- und Max-Values

Die wählbare Uhrzeit lässt sich über minValue und maxValue begrenzen.

––––

Uhrzeit(optional)Zwischen 8 und 16 Uhr

Granularity

Mit der granularity Property wird definiert, ob Stunden, Minuten und/oder Sekunden auswählbar sind.

––

Stunde(optional)

––––

Stunde und Minute(optional)

––––––

Stunde, Minute und Sekunde(optional)

Disabled

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

––––

Datum(optional)

Kombiniere mit ...

ContextualHelp

Benutze das ContextualHelp‍, wenn zusätzliche Informationen bereitgestellt werden sollen, die zu umfangreich für die FieldDescription sind.

––––

Uhrzeit(optional)

React Hook Form

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

Properties

Property	Type	Default	Description
`autoFocus`	`boolean`	-	Whether the element should receive focus on render.
`children`	`ReactNode`	-
`className`	`ClassNameOrFunction<DateFieldRenderProps>`	'react-aria-TimeField'	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`	-
`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).
`granularity`	`"hour" \| "minute" \| "second"`	'minute'	Determines the smallest unit that is displayed in the time picker.
`hidden`	`boolean`	-
`hideTimeZone`	`boolean`	-	Whether to hide the time zone abbreviation.
`hourCycle`	`12 \| 24`	-	Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
`id`	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`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.
`lang`	`string`	-
`maxValue`	`TimeValue`	-	The maximum allowed time that a user may select.
`minValue`	`TimeValue`	-	The minimum allowed time that a user may select.
`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).
`placeholderValue`	`TimeValue`	-	A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults to 12:00 AM or 00:00 depending on the hour cycle.
`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.
`shouldForceLeadingZeros`	`boolean`	-	Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.
`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.
`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)`	-	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" \| "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.
`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	Default	Description
`onBlur`	`((e: FocusEvent<Element, Element>) => void)`	-	Handler that is called when the element loses focus.
`onChange`	`((value: TimeValue) => void)`	-	Handler that is called when the value changes.
`onClick`	`MouseEventHandler<HTMLDivElement>`	-
`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.
`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.

Accessibility

Property	Type	Default	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

TimeField

Best Practices

Min- und Max-Values

Granularity

Disabled

Kombiniere mit ...

ContextualHelp

React Hook Form

Properties

Events

Accessibility

Auf dieser Seite