The duration input lets users input an amount of time, 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.

The value presented to the user will be formatted on blur e.g. "1.5" --> "1:30".

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}
      />
    </Field>
    <Text>{form.value || 'no value'}</Text>
  </Stack>
);

Duration Input