TimeField

Tidsfält

Storybook

React Aria

Tidsfält används när användaren ska fylla i en tid. Komponenten bygger på React Arias TimeField. In- och utdata bygger på @internationalized/date — samma bibliotek som används av DateField och DatePicker.

import { TimeField } from '@midas-ds/components'

<TimeField
  label='Etikett'
  description='Beskrivning'
/>

EtikettBeskrivning

⁦––:––⁩ AM

Användning

TimeField fungerar som andra formulärskomponenter och kan integreras i vanliga HTML-forms via name eller valideras via validate och isInvalid.

Förvalt värde (uncontrolled)

Använd defaultValue med Time från @internationalized/date.

import { Time } from '@internationalized/date'

<TimeField
  label='Etikett'
  defaultValue={new Time(14, 30)}
/>

EtikettBeskrivning

⁦2:30⁩ PM

Controlled value

import { TimeField } from '@midas-ds/components'
import { Time } from '@internationalized/date'

export const TimeFieldControlled = () => {
  const [time, setTime] = React.useState(new Time(9, 0))
  return (
    <>
      <TimeField
        label='Välj en tid'
        value={time}
        onChange={setTime}
      />
      <pre>Vald tid: {time?.toString()}</pre>
    </>
  )
}

Välj en tid

⁦9:00⁩ AM

Vald tid: 09:00:00

Varianter

isClearable

Visar en knapp som tömmer fältet. Knappen visas bara när fältet har ett komplett värde.

<TimeField
  isClearable
  defaultValue={new Time(14, 30)}
  label='Etikett'
/>

EtikettBeskrivning

⁦2:30⁩ PM

Sekunder

Använd granularity="second" för att även visa sekunder.

<TimeField
  granularity='second'
  defaultValue={new Time(14, 30, 45)}
  label='Etikett'
/>

EtikettBeskrivning

⁦2:30:45⁩ PM

12-timmarsformat

Använd hourCycle={12} för AM/PM-format.

<TimeField
  hourCycle={12}
  defaultValue={new Time(14, 30)}
  label='Etikett'
/>

EtikettBeskrivning

⁦2:30⁩ PM

API

Name	Type	Default	Description
description	string	-
errorMessage	string | ((validation: ValidationResult) => string)	-
errorPosition	"top" | "bottom"	-
label	string	-
size	Size	'large'	Component size (large: height 48px, medium: height 40px)
popover	InfoPopoverProps	-	An assistive text that helps the user understand the field better. Will be hidden in a popover with an info icon button.
isClearable	boolean	false	Show a clear button to remove the selected time
className	ClassNameOrFunction<DateFieldRenderProps>	'react-aria-TimeField'	The CSS className for the element. A function may be provided to compute the class based on component state.
hourCycle	12 | 24	-	Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
granularity	"hour" | "minute" | "second"	'minute'	Determines the smallest unit that is displayed in the time picker.
hideTimeZone	boolean	-	Whether to hide the time zone abbreviation.
shouldForceLeadingZeros	boolean	-	Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.
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.
minValue	TimeValue | null	-	The minimum allowed time that a user may select.
maxValue	TimeValue | null	-	The maximum allowed time that a user may select.
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: MappedTimeValue<T>) => true | ValidationError | null) | undefined	-	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 | null	-	The current value (controlled).
defaultValue	TimeValue | null	-	The default value (uncontrolled).
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.
children	ChildrenOrFunction<DateFieldRenderProps>	-	The children of the component. A function may be provided to alter the children based on component state.
style	StyleOrFunction<DateFieldRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.
render	DOMRenderFunction<"div", DateFieldRenderProps>	-	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 | null	-	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.
ref	Ref<HTMLDivElement>	-