Stabil

TimePicker

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.

TimePicker støtter de samme propsene som Input — blant annet label, error, name, id og aria-* — og kobles automatisk til FormField.

Utforsk

Forhåndsvisning

Starttid

label

error

required

disabled

<TimePicker label="Starttid" />

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={(time) => {
      setHours(time?.hours);
      setMinutes(time?.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={(time) => {
          setHours(time?.hours);
          setMinutes(time?.minutes);
        }}
      />
    </div>
    <div>
      <p style={{ fontSize: "0.875rem", marginBottom: "0.25rem" }}>30-minutters intervall:</p>
      <TimePicker
        hours={hours}
        minutes={minutes}
        minuteStep={30}
        onValueChange={(time) => {
          setHours(time?.hours);
          setMinutes(time?.minutes);
        }}
      />
    </div>
  </div>
);
}

Med label og feilmelding

function TimePickerLabel() {
const [time, setTime] = React.useState(undefined);
return (
  <TimePicker
    label="Starttid"
    name="starttid"
    error={time ? undefined : "Velg et klokkeslett"}
    hours={time?.hours}
    minutes={time?.minutes}
    onValueChange={setTime}
  />
);
}

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

Bruk label-propen eller en FormField med <Label> for å gi feltet et synlig navn
Uten label, id, aria-label eller aria-labelledby får inputfeltet aria-label="Klokkeslett"
error-propen setter aria-invalid og kobler feilmelding via aria-describedby
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
`label`	`ReactNode`	—	Synlig label over feltet
`error`	`ReactNode`	—	Feilmelding under feltet
`name`	`string`	—	Navn for skjemainnsending (verdi: tt:mm)
`placeholder`	`string`	`"tt:mm"`	Plassholdertekst for inputfeltet
`disabled`	`boolean`	`false`	Deaktiver tidsvelgeren
`required`	`boolean`	`false`	Marker som påkrevd
`minuteStep`	`number`	`15`	Minutt-intervall for opp/ned-knapper
`className`	`string`	—	Ekstra CSS-klasser for feltet

I tillegg sendes øvrige input-props (f.eks. id, aria-*, onBlur, onKeyDown) videre til inputfeltet.