Site settings
Change the appearance of the site to suit your preferences
TimePicker
A Timepicker is a component that allows the user to select a time in a user-friendly way.
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" />