TimePicker

Kildekode på GitHub · Les som Markdown

TimePicker er en tidsvelger der brukeren kan skrive inn klokkeslett direkte (tt:mm) eller bruke opp/ned-knapper for å justere tiden i konfigurerbare intervaller. Støtter 24-timersformat.

Importering

import { TimePicker } from "@kilden/designsystem";

Grunnleggende bruk

function TimePickerDemo() {
const [hours, setHours] = React.useState(9);
const [minutes, setMinutes] = React.useState(0);
return (
  <TimePicker
    hours={hours}
    minutes={minutes}
    onValueChange={({ hours, minutes }) => {
      setHours(hours);
      setMinutes(minutes);
    }}
  />
);
}

Uten startverdi

function TimePickerEmpty() {
const [time, setTime] = React.useState(undefined);
return (
  <TimePicker
    hours={time?.hours}
    minutes={time?.minutes}
    onValueChange={setTime}
  />
);
}

Custom minutt-intervall

Bruk minuteStep for å endre intervallet opp/ned-knappene og piltastene justerer med. Standard er 15 minutter.

function TimePickerStep() {
const [hours, setHours] = React.useState(12);
const [minutes, setMinutes] = React.useState(0);
return (
  <div style={{ display: "grid", gap: "1rem" }}>
    <div>
      <p style={{ fontSize: "0.875rem", marginBottom: "0.25rem" }}>5-minutters intervall:</p>
      <TimePicker
        hours={hours}
        minutes={minutes}
        minuteStep={5}
        onValueChange={({ hours, minutes }) => {
          setHours(hours);
          setMinutes(minutes);
        }}
      />
    </div>
    <div>
      <p style={{ fontSize: "0.875rem", marginBottom: "0.25rem" }}>30-minutters intervall:</p>
      <TimePicker
        hours={hours}
        minutes={minutes}
        minuteStep={30}
        onValueChange={({ hours, minutes }) => {
          setHours(hours);
          setMinutes(minutes);
        }}
      />
    </div>
  </div>
);
}

Deaktivert

<TimePicker hours={9} minutes={30} disabled />

Bruksanbefalinger

Møtetid: 09:00

Bruk for klokkeslett-input

TimePicker passer for skjemafelt der brukeren skal velge et klokkeslett, som møtetidspunkt eller åpningstider.

Varighet: 02:30

Ikke bruk for varighet

For tidsintervaller (f.eks. '2 timer og 30 minutter') bør du bruke separate Input-felt for timer og minutter.

minuteStep=15

Velg passende minutt-intervall

Bruk minuteStep som matcher konteksten — 15 min for møter, 5 min for presis tid, 30 min for grove estimater.

13.03.2026 09:00

Ikke bruk for dato+tid

For valg av både dato og klokkeslett, kombiner DatePicker eller DateInput med TimePicker i stedet for én komponent.

Tilgjengelighet

Inputfeltet har aria-label="Klokkeslett"
Opp/ned-knappene har aria-label ("Øk tid" / "Reduser tid")
ArrowUp og ArrowDown justerer tiden når inputfeltet har fokus
Støtter manuell inntasting med inputMode="numeric"
Deaktivert tilstand kommuniseres via disabled på alle elementer
24-timersformat unngår AM/PM-forvirring

Props

Prop	Type	Default	Beskrivelse
`hours`	`number`	—	Valgt time (0–23)
`minutes`	`number`	—	Valgt minutt (0–59)
`onValueChange`	`(time: \{ hours: number; minutes: number \} \| undefined) => void`	—	Kalles når klokkeslettet endres
`placeholder`	`string`	`"tt:mm"`	Plassholdertekst for inputfeltet
`disabled`	`boolean`	`false`	Deaktiver tidsvelgeren
`minuteStep`	`number`	`15`	Minutt-intervall for opp/ned-knapper
`className`	`string`	—	Ekstra CSS-klasser for container-elementet