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

It shares disabled, read only and validation states with TextInput.

Alternatives

TextInput — For single-line text input
Textarea — For multi-line text input
CurrencyInput — For currency amount input
SearchInput — For search input
SearchInput — For search input

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

Usage

Basic