The duration input lets users input an amount of time duration, not a specific time.

Usage

The value and onChange props expect an integer of minutes e.g. 1.5 hours would be 90 minutes. This is to circumvent JS issues with float calculations.

display prop allows user to select the duration format.

Duration input can handle vast number of duration input formats and converts them to desired format on blur,

User input	Formatted to (when "display: time")	Formatted to (when "display: duration")
0	0:00	0h 0m
5	5:00	5h 0m
5.5	5:30	5h 30m
30m	0:30	0h 30m
5h 30m	5:30	5h 30m
5:30	5:30	5h 30m
5h30m	5:30	5h 30m
30m 5h	5:30	5h 30m

Basic

Basic with the default display prop (e.g. time)

Edit in Playroom

const formSchema = field.duration();
const form = useForm(formSchema);
return (
  <Stack gap="large">
    <Field label="Example">
      <DurationInput
        value={form.value}
        onChange={form.props.onChange}
        onBlur={form.props.onBlur}
        display="time"
      />
    </Field>
    <Text>{form.value || 'no value'}</Text>
  </Stack>
);

Basic with the display prop as duration

Edit in Playroom

const formSchema = field.duration();
const form = useForm(formSchema);
return (
  <Stack gap="large">
    <Field label="Basic with display prop as 'duration'">
      <DurationInput
        value={form.value}
        onChange={form.props.onChange}
        onBlur={form.props.onBlur}
        display="duration"
      />
    </Field>
    <Text>{form.value || 'no value'}</Text>
  </Stack>
);

Duration Input

Basic