# TimePicker

*Category:* Components
*Section:* Pickers
*Source:* https://uikit.developers.rio.cloud/#/components/timepicker
*Captured:* 2026-04-27T14:57:45.238Z

## TimePicker

### Example: Example 1

Uncontrolled component

With icon

Controlled component without initial value

Set current time Clear time

Disabled

#### React (tsx)

```tsx
import { useState } from 'react';

import TimePicker from '@rio-cloud/rio-uikit/TimePicker';
import Notification from '@rio-cloud/rio-uikit/Notification';
import Button from '@rio-cloud/rio-uikit/Button';

const getCurrentTime = () => {
    const getPadded = (value: number) => (value >= 10 ? value : `0${value}`);
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    return `${getPadded(hours)}:${getPadded(minutes)}`;
};

export default () => {
    const [timeValue, setTimeValue] = useState('');

    const notifyTime = (value: string) => Notification.info(`Entered time: ${value}`);

    const handleChangeTime = (value: string) => {
        setTimeValue(value);
        notifyTime(value);
    };

    return (
        <div className='row max-width-600'>
            <div className='col-sm-6 form-group'>
                <label>Uncontrolled component</label>
                <TimePicker onChange={notifyTime} />
            </div>
            <div className='col-sm-6 form-group'>
                <label>With icon</label>
                <TimePicker onChange={notifyTime} showIcon />
            </div>
            <div className='col-sm-6'>
                <div className='form-group'>
                    <label>Controlled component without initial value</label>
                    <TimePicker value={timeValue} onChange={handleChangeTime} showIcon />
                </div>
                <div className='btn-toolbar'>
                    <Button onClick={() => setTimeValue(getCurrentTime())}>Set current time</Button>
                    <Button onClick={() => setTimeValue('')}>Clear time</Button>
                </div>
            </div>
            <div className='col-sm-6 form-group'>
                <label>Disabled</label>
                <TimePicker value='12:00' disabled />
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="row max-width-600">
    <div class="col-sm-6 form-group">
        <label>Uncontrolled component</label>
        <div class="TimePicker">
            <div class="input-group">
                <div class="form-control-feedback-wrapper">
                    <input class="TimePickerInput form-control" value="">
                </div>
                <div class="TimePickerIncreaseButton input-group-addon">
                    <div class="text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer">
                        <div class="rioglyph rioglyph-chevron-left scale-90">
                        </div>
                    </div>
                    <div class="text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer">
                        <div class="rioglyph rioglyph-chevron-right scale-90">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 form-group">
        <label>With icon</label>
        <div class="TimePicker">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-time-alt">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper">
                    <input class="TimePickerInput form-control" value="">
                </div>
                <div class="TimePickerIncreaseButton input-group-addon">
                    <div class="text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer">
                        <div class="rioglyph rioglyph-chevron-left scale-90">
                        </div>
                    </div>
                    <div class="text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer">
                        <div class="rioglyph rioglyph-chevron-right scale-90">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label>Controlled component without initial value</label>
            <div class="TimePicker">
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-time-alt">
                        </span>
                    </span>
                    <div class="form-control-feedback-wrapper">
                        <input class="TimePickerInput form-control" value="">
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-toolbar">
            <button type="button" class="btn btn-default btn-component" tabindex="0">Set current time</button>
            <button type="button" class="btn btn-default btn-component" tabindex="0">Clear time</button>
        </div>
    </div>
    <div class="col-sm-6 form-group">
        <label>Disabled</label>
        <div class="TimePicker">
            <div class="input-group">
                <div class="form-control-feedback-wrapper">
                    <input class="TimePickerInput form-control" disabled="" value="">
                </div>
                <div class="TimePickerIncreaseButton input-group-addon pointer-events-none bg-lightest">
                    <div class="text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer">
                        <div class="rioglyph rioglyph-chevron-left scale-90">
                        </div>
                    </div>
                    <div class="text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer">
                        <div class="rioglyph rioglyph-chevron-right scale-90">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |
| onChange | (value: string) => void | — | Callback function when the value changes and is a valid time format. It also emits an empty string when the input is cleared. If not it handles the state internally until the time is valid and filled. |
| alwaysShowMask | boolean | true | Defines whether to always show the input mask placeholder. |
| showIcon | boolean | false | Defines whether to show the input icon. |
| dropdown | boolean | false | Defines whether to show a dropdown with pre-defined time values. |
| minuteOffset | number | 15 | Defines the minute interval for time controls and dropdown values. Invalid values fallback to 15. |
| disabled | boolean | false | Defines whether the component is disabled. |
| errorMessage | string \| React.ReactNode | — | Input error message. |
| warningMessage | string \| React.ReactNode | — | Input warning message. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Feedback message width. |
| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' \| 'onChange'> | — | Additional properties to be set on the input element. |
| className | string | — | Additional classes to be set on the wrapper element. |

### Example: Example 2

Default Please insert a valid time

With icon Just a normal warning message

#### React (tsx)

```tsx
import TimePicker from '@rio-cloud/rio-uikit/TimePicker';
import Notification from '@rio-cloud/rio-uikit/Notification';

export default () => {
    const notifyTime = (value: string) => Notification.info(`Entered time: ${value}`);

    return (
        <div className='max-width-600 height-100 display-flex gap-25'>
            <div className='flex-1-1 max-width-150 form-group has-feedback has-error'>
                <label>Default</label>
                <TimePicker errorMessage='Please insert a valid time' />
            </div>
            <div className='flex-1-1 max-width-150 form-group has-feedback has-warning'>
                <label>With icon</label>
                <TimePicker showIcon warningMessage='Just a normal warning message' messageWhiteSpace='nowrap' />
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="max-width-600 height-100 display-flex gap-25">
    <div class="flex-1-1 max-width-150 form-group has-feedback has-error">
        <label>Default</label>
        <div class="TimePicker">
            <div class="input-group">
                <div class="form-control-feedback-wrapper">
                    <input class="TimePickerInput form-control" value="">
                    <span class="form-control-feedback rioglyph rioglyph-error-sign">
                    </span>
                    <span class="help-block white-space-normal">
                        <span>Please insert a valid time</span>
                    </span>
                </div>
                <div class="TimePickerIncreaseButton input-group-addon">
                    <div class="text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer">
                        <div class="rioglyph rioglyph-chevron-left scale-90">
                        </div>
                    </div>
                    <div class="text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer">
                        <div class="rioglyph rioglyph-chevron-right scale-90">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex-1-1 max-width-150 form-group has-feedback has-warning">
        <label>With icon</label>
        <div class="TimePicker">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-time-alt">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper">
                    <input class="TimePickerInput form-control" value="">
                    <span class="form-control-feedback rioglyph rioglyph-warning-sign">
                    </span>
                    <span class="help-block white-space-nowrap">
                        <span>Just a normal warning message</span>
                    </span>
                </div>
                <div class="TimePickerIncreaseButton input-group-addon">
                    <div class="text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer">
                        <div class="rioglyph rioglyph-chevron-left scale-90">
                        </div>
                    </div>
                    <div class="text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer">
                        <div class="rioglyph rioglyph-chevron-right scale-90">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |
| onChange | (value: string) => void | — | Callback function when the value changes and is a valid time format. It also emits an empty string when the input is cleared. If not it handles the state internally until the time is valid and filled. |
| alwaysShowMask | boolean | true | Defines whether to always show the input mask placeholder. |
| showIcon | boolean | false | Defines whether to show the input icon. |
| dropdown | boolean | false | Defines whether to show a dropdown with pre-defined time values. |
| minuteOffset | number | 15 | Defines the minute interval for time controls and dropdown values. Invalid values fallback to 15. |
| disabled | boolean | false | Defines whether the component is disabled. |
| errorMessage | string \| React.ReactNode | — | Input error message. |
| warningMessage | string \| React.ReactNode | — | Input warning message. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Feedback message width. |
| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' \| 'onChange'> | — | Additional properties to be set on the input element. |
| className | string | — | Additional classes to be set on the wrapper element. |

### Example: Example 3

Mandatory value

#### React (tsx)

```tsx
import { useState } from 'react';

import classNames from '@rio-cloud/rio-uikit/classNames';
import TimePicker from '@rio-cloud/rio-uikit/TimePicker';

export default () => {
    const [timeValue, setTimeValue] = useState('12:00');
    const isInvalid = timeValue === '';

    return (
        <div className='max-width-300'>
            <div className={classNames('form-group has-feedback', isInvalid && 'has-error')}>
                <label>Mandatory value</label>
                <TimePicker
                    value={timeValue}
                    onChange={setTimeValue}
                    errorMessage={isInvalid ? 'This field is required' : undefined}
                />
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="max-width-300">
    <div class="form-group has-feedback">
        <label>Mandatory value</label>
        <div class="TimePicker">
            <div class="input-group">
                <div class="form-control-feedback-wrapper">
                    <input class="TimePickerInput form-control" value="">
                </div>
                <div class="TimePickerIncreaseButton input-group-addon">
                    <div class="text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer">
                        <div class="rioglyph rioglyph-chevron-left scale-90">
                        </div>
                    </div>
                    <div class="text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer">
                        <div class="rioglyph rioglyph-chevron-right scale-90">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |
| onChange | (value: string) => void | — | Callback function when the value changes and is a valid time format. It also emits an empty string when the input is cleared. If not it handles the state internally until the time is valid and filled. |
| alwaysShowMask | boolean | true | Defines whether to always show the input mask placeholder. |
| showIcon | boolean | false | Defines whether to show the input icon. |
| dropdown | boolean | false | Defines whether to show a dropdown with pre-defined time values. |
| minuteOffset | number | 15 | Defines the minute interval for time controls and dropdown values. Invalid values fallback to 15. |
| disabled | boolean | false | Defines whether the component is disabled. |
| errorMessage | string \| React.ReactNode | — | Input error message. |
| warningMessage | string \| React.ReactNode | — | Input warning message. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Feedback message width. |
| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' \| 'onChange'> | — | Additional properties to be set on the input element. |
| className | string | — | Additional classes to be set on the wrapper element. |

## TimePicker with dropdown

Shows a dropdown for faster time selection. Use minuteOffset to control the interval between dropdown values.

### Example: Example 4

Controlled component with dropdown

00:00
00:30
01:00
01:30
02:00
02:30
03:00
03:30
04:00
04:30
05:00
05:30
06:00
06:30
07:00
07:30
08:00
08:30
09:00
09:30
10:00
10:30
11:00
11:30
12:00
12:30
13:00
13:30
14:00
14:30
15:00
15:30
16:00
16:30
17:00
17:30
18:00
18:30
19:00
19:30
20:00
20:30
21:00
21:30
22:00
22:30
23:00
23:30

#### React (tsx)

```tsx
import { useState } from 'react';

import TimePicker from '@rio-cloud/rio-uikit/TimePicker';
import Notification from '@rio-cloud/rio-uikit/Notification';

export default () => {
    const [timeValue, setTimeValue] = useState('12:00');

    const handleChangeTime = (value: string) => {
        setTimeValue(value);
        Notification.info(`Entered time: ${value}`);
    };

    return (
        <div className='max-width-200'>
            <div className='form-group'>
                <label>Controlled component with dropdown</label>
                <TimePicker value={timeValue} onChange={handleChangeTime} dropdown minuteOffset={30} showIcon />
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="max-width-200">
    <div class="form-group">
        <label>Controlled component with dropdown</label>
        <div class="TimePicker dropdown dropup">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-time-alt">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper">
                    <input class="TimePickerInput form-control" value="">
                </div>
                <div class="TimePickerIncreaseButton input-group-addon">
                    <div class="text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer">
                        <div class="rioglyph rioglyph-chevron-left scale-90">
                        </div>
                    </div>
                    <div class="text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer">
                        <div class="rioglyph rioglyph-chevron-right scale-90">
                        </div>
                    </div>
                </div>
            </div>
            <ul class="dropdown-menu max-height-200 overflow-auto width-100pct" role="menu">
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="00:00" data-item-index="0">
                        <span class="selected-option-dropdown-item">00:00</span>
                        <input type="hidden" value="00:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="00:30" data-item-index="1">
                        <span class="selected-option-dropdown-item">00:30</span>
                        <input type="hidden" value="00:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="01:00" data-item-index="2">
                        <span class="selected-option-dropdown-item">01:00</span>
                        <input type="hidden" value="01:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="01:30" data-item-index="3">
                        <span class="selected-option-dropdown-item">01:30</span>
                        <input type="hidden" value="01:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="02:00" data-item-index="4">
                        <span class="selected-option-dropdown-item">02:00</span>
                        <input type="hidden" value="02:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="02:30" data-item-index="5">
                        <span class="selected-option-dropdown-item">02:30</span>
                        <input type="hidden" value="02:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="03:00" data-item-index="6">
                        <span class="selected-option-dropdown-item">03:00</span>
                        <input type="hidden" value="03:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="03:30" data-item-index="7">
                        <span class="selected-option-dropdown-item">03:30</span>
                        <input type="hidden" value="03:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="04:00" data-item-index="8">
                        <span class="selected-option-dropdown-item">04:00</span>
                        <input type="hidden" value="04:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="04:30" data-item-index="9">
                        <span class="selected-option-dropdown-item">04:30</span>
                        <input type="hidden" value="04:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="05:00" data-item-index="10">
                        <span class="selected-option-dropdown-item">05:00</span>
                        <input type="hidden" value="05:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="05:30" data-item-index="11">
                        <span class="selected-option-dropdown-item">05:30</span>
                        <input type="hidden" value="05:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="06:00" data-item-index="12">
                        <span class="selected-option-dropdown-item">06:00</span>
                        <input type="hidden" value="06:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="06:30" data-item-index="13">
                        <span class="selected-option-dropdown-item">06:30</span>
                        <input type="hidden" value="06:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="07:00" data-item-index="14">
                        <span class="selected-option-dropdown-item">07:00</span>
                        <input type="hidden" value="07:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="07:30" data-item-index="15">
                        <span class="selected-option-dropdown-item">07:30</span>
                        <input type="hidden" value="07:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="08:00" data-item-index="16">
                        <span class="selected-option-dropdown-item">08:00</span>
                        <input type="hidden" value="08:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="08:30" data-item-index="17">
                        <span class="selected-option-dropdown-item">08:30</span>
                        <input type="hidden" value="08:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="09:00" data-item-index="18">
                        <span class="selected-option-dropdown-item">09:00</span>
                        <input type="hidden" value="09:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="09:30" data-item-index="19">
                        <span class="selected-option-dropdown-item">09:30</span>
                        <input type="hidden" value="09:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="10:00" data-item-index="20">
                        <span class="selected-option-dropdown-item">10:00</span>
                        <input type="hidden" value="10:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="10:30" data-item-index="21">
                        <span class="selected-option-dropdown-item">10:30</span>
                        <input type="hidden" value="10:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="11:00" data-item-index="22">
                        <span class="selected-option-dropdown-item">11:00</span>
                        <input type="hidden" value="11:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="11:30" data-item-index="23">
                        <span class="selected-option-dropdown-item">11:30</span>
                        <input type="hidden" value="11:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="12:00" data-item-index="24">
                        <span class="selected-option-dropdown-item">12:00</span>
                        <input type="hidden" value="12:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="12:30" data-item-index="25">
                        <span class="selected-option-dropdown-item">12:30</span>
                        <input type="hidden" value="12:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="13:00" data-item-index="26">
                        <span class="selected-option-dropdown-item">13:00</span>
                        <input type="hidden" value="13:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="13:30" data-item-index="27">
                        <span class="selected-option-dropdown-item">13:30</span>
                        <input type="hidden" value="13:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="14:00" data-item-index="28">
                        <span class="selected-option-dropdown-item">14:00</span>
                        <input type="hidden" value="14:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="14:30" data-item-index="29">
                        <span class="selected-option-dropdown-item">14:30</span>
                        <input type="hidden" value="14:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="15:00" data-item-index="30">
                        <span class="selected-option-dropdown-item">15:00</span>
                        <input type="hidden" value="15:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="15:30" data-item-index="31">
                        <span class="selected-option-dropdown-item">15:30</span>
                        <input type="hidden" value="15:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="16:00" data-item-index="32">
                        <span class="selected-option-dropdown-item">16:00</span>
                        <input type="hidden" value="16:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="16:30" data-item-index="33">
                        <span class="selected-option-dropdown-item">16:30</span>
                        <input type="hidden" value="16:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="17:00" data-item-index="34">
                        <span class="selected-option-dropdown-item">17:00</span>
                        <input type="hidden" value="17:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="17:30" data-item-index="35">
                        <span class="selected-option-dropdown-item">17:30</span>
                        <input type="hidden" value="17:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="18:00" data-item-index="36">
                        <span class="selected-option-dropdown-item">18:00</span>
                        <input type="hidden" value="18:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="18:30" data-item-index="37">
                        <span class="selected-option-dropdown-item">18:30</span>
                        <input type="hidden" value="18:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="19:00" data-item-index="38">
                        <span class="selected-option-dropdown-item">19:00</span>
                        <input type="hidden" value="19:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="19:30" data-item-index="39">
                        <span class="selected-option-dropdown-item">19:30</span>
                        <input type="hidden" value="19:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="20:00" data-item-index="40">
                        <span class="selected-option-dropdown-item">20:00</span>
                        <input type="hidden" value="20:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="20:30" data-item-index="41">
                        <span class="selected-option-dropdown-item">20:30</span>
                        <input type="hidden" value="20:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="21:00" data-item-index="42">
                        <span class="selected-option-dropdown-item">21:00</span>
                        <input type="hidden" value="21:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="21:30" data-item-index="43">
                        <span class="selected-option-dropdown-item">21:30</span>
                        <input type="hidden" value="21:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="22:00" data-item-index="44">
                        <span class="selected-option-dropdown-item">22:00</span>
                        <input type="hidden" value="22:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="22:30" data-item-index="45">
                        <span class="selected-option-dropdown-item">22:30</span>
                        <input type="hidden" value="22:30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="23:00" data-item-index="46">
                        <span class="selected-option-dropdown-item">23:00</span>
                        <input type="hidden" value="23:00">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="23:30" data-item-index="47">
                        <span class="selected-option-dropdown-item">23:30</span>
                        <input type="hidden" value="23:30">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |
| onChange | (value: string) => void | — | Callback function when the value changes and is a valid time format. It also emits an empty string when the input is cleared. If not it handles the state internally until the time is valid and filled. |
| alwaysShowMask | boolean | true | Defines whether to always show the input mask placeholder. |
| showIcon | boolean | false | Defines whether to show the input icon. |
| dropdown | boolean | false | Defines whether to show a dropdown with pre-defined time values. |
| minuteOffset | number | 15 | Defines the minute interval for time controls and dropdown values. Invalid values fallback to 15. |
| disabled | boolean | false | Defines whether the component is disabled. |
| errorMessage | string \| React.ReactNode | — | Input error message. |
| warningMessage | string \| React.ReactNode | — | Input warning message. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Feedback message width. |
| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' \| 'onChange'> | — | Additional properties to be set on the input element. |
| className | string | — | Additional classes to be set on the wrapper element. |