## Feature Examples ### Size - description:

Adjust the size of the input using the size prop. 3 sizes are supported:

  • For most common cases, use the default medium.
  • Use large when the time input needs emphasis.
  • In more dense and compact layouts, use small.
    • - example: ```jsx ; ``` ### Width - description:

    Control the width of the input with the width property. 2 values are supported:

  • To adjust the width of the field according to the size of the value use the default auto.
  • Fill the parent container completely with 100%.
    • - example: ```jsx ; ``` ### Border - description:

    Style the component using the border prop. It supports 4 styles:

  • For most common cases, use standard.
  • To build inputs that can be used to filter data, use round.
  • Use bottomLine to create an editable, underlined title field.
  • When a component provides its own hover and focus styles, such as a table or spreadsheet cells, use none.
    • - example: ```jsx ; ``` ### Status - description:

    Control the status of the time input using the status prop. It supports 3 states:

  • error demonstrates that something is missing or the entry was invalid. The conditions for an error status must be defined when using this prop.
  • warning highlights an input value that might have a significant impact to the user or it can't be validated.
  • loading shows when an input value is being uploaded to the server.
    • - example: ```jsx ; ``` ### Status message - description:

    Add text that explains the status or what action the user should take with the statusMessage prop.

    Showing the status message inline, directly below the input is preferred in all default cases.

  • To add an accessible inline message, wrap the component in a and add the statusMessage.
  • To add a status message in a tooltip that requires users to hover on the icon, use the statusMessage prop. Control tooltip placement with tooltipPlacement prop.

    • View more inline status message examples in .

    - example: ```jsx For all default cases:{' '} For narrow layouts only: ; ``` ### Invalid message - description:

    To add predefined validations to the Time Input, use the invalidMessage prop.

    The error icon and tooltip message are triggered when a user enters an invalid syntax, e.g., 15:99 am.

    To exclude past times from the calendar view, use the excludePastTimes prop. To exclude specific times, use the filterTime prop.

    The error message shows in a tooltip on hover over the icon by default. The message can be updated or removed.

    Note: When both statusMessage and invalidMessage props are used, the input will display the statusMessage, unless internal validation fails. Then it would display the invalidMessage.

    - example: ```jsx ; ``` ### Disabled - description:

    Disable all input interactions with the disabled prop. Use it to demonstrate that the user cannot select the time.

    - example: ```jsx ; ``` ### Prefix & suffix - description:

    Add text, icons or a button at the beginning or end of an input field using prefix and suffix.

    - example: ```jsx From} suffix={GMT+1} /> ; ``` ### Locale - description:

    Specify a correct time formatting (e.g., AM/PM or military time) per country using the locale prop.

    - example: ```jsx ; ``` ### Time style - description:

    Control whether to display the time zone info with timeStyle. It supports 2 values:

  • short (the default) displays the time only.
  • long shows the time together with the time zone.
    • - example: ```jsx ; ``` ### Step - description:

    In a dropdown layout, control the interval between timestamps using the step prop.

    By default, the interval between timestamps is 15 minutes.

    - example: ```jsx 15 min (default): 5 min: 30 min: 60 min: ; ``` ## Developer Examples ### Predefined time validations - description:

    The component's validations cover the following cases:

  • formatError: when a user enters a time that’s invalid and impossible to parse.
  • outOfBoundsError: when a user types in a time out of the accepted range. This validation is triggered when the excludePastTimes or filterTime props are enabled.

    • Note: In order for the error to be cleared, use onChange. This way, the error will not show when the user enters a valid time.

    - example: ```jsx () => { const [error, setError] = React.useState() const onChange = (value) => { setError(undefined) } const onInvalid = (errorInfo) => { if (errorInfo.validationType === 'outOfBoundsError') { setError('Past time values are not allowed') } else if (errorInfo.validationType === 'formatError') { setError('Invalid format') } } return ( ) } ``` ### Custom time validations - description:

    To apply custom validations to the component, use information returned by onChange and onInvalid props. The onInvalid prop provides validationType and input value parameters.

    - example: ```jsx () => { const [error, setError] = React.useState() const onChange = (value) => { if (value.date?.getMinutes() !== 0) { setError('Value must match 1 hour interval') } else { setError(undefined) } } const onInvalid = (errorInfo) => { if (errorInfo) { setError('Invalid value') } } return ( ) } ``` ## Common Use Case Examples ### Scheduling - description:

    Use the time input together with a to schedule specific times for events, appointments, delivery hours, etc.

    - example: ```jsx () => { const [startDate, setStartDate] = React.useState(); const [endDate, setEndDate] = React.useState(); return ( setStartDate(value)} /> setStartDate(value)} /> ); }; ``` ### Range - description:

    Use the component to merge two input fields to specify a time duration.

    - example: ```jsx ; ```