Components

TimePicker

A Timepicker is a component that allows the user to select a time in a user-friendly way.

Examples

A simple timepicker

<TimePicker />

A time picker where the time is controlled externally.

() => {
  const [time, setTime] = React.useState(new Time(13, 37));
  return (
    <Stack>
      <TimePicker value={time} onValueChange={setTime} />
      <Text>Tiden er nå {time.toString()}</Text>
    </Stack>
  );
}

A time picker where each button press takes you to the nearest quarter hour.

<TimePicker minuteInterval={15} />

A time picker inside a form.

<form onSubmit={(e) => {
  e.preventDefault();
  alert(`The time is ${e.target.time.value}`);
}}>
    <TimePicker name="time" marginBottom={2} />
    <Button variant="primary" type="submit">Send inn</Button>
</form>

A time picker with an error message.

<TimePicker invalid errorText="Ugyldig avreisetidspunkt"/>

Timepicker variants

<Stack gap={3}>
  <TimePicker label="Base" />
  <TimePicker label="Floating" variant="floating" />
  <TimePicker label="Ghost" variant="ghost" />
</Stack>

A disabled time picker

<TimePicker disabled />

A time picker with a custom label and full width.

<TimePicker width="100%" label="Avreisetid" />

Guidelines

Time pickers are used when you want the user to specify a time.

Pressing the left and right buttons will adjust the time by a predefined interval (5 minutes unless otherwise specified).

If the user should not be able to change the time, a time picker should not be used.

Code

`<TimePicker />`

import { TimePicker } from "@vygruppen/spor-react";

Lets the user pick a time

Props

Name	Type	Description
`value`	`Time`
`defaultValue`	`Time`
`onValueChange`	`(newTime: Time) => void`
`minuteInterval`	`number`	Number of minutes to round up or down when triggering the back and forward buttons. Default 30 (minutes)
`label`	`string`
`disabled`	`boolean`
`invalid`	`boolean`
`errorText`	`string[]`	This prop give a feedback about the reason of the error to user in case there are any error. It works combined with the prop invalid set to true
`variant`	`"core" \| "floating" \| "ghost";`	Defaults to core

Fundamentals

Getting started