Time Picker

<State>
    {([time, setTime]) => (
        <Form.TimePicker
            label="Time"
            description="08:00 АM to 05:00 PM"
            min="08:00 АM"
            max="05:00 PM"
            onChange={setTime}
            value={time}
        />
    )}
</State>

<State>
    {([time, setTime]) => (
        <Form.TimePicker
            label="Time"
            description="08:00 АM to 05:00 PM"
            min="08:00 АM"
            max="05:00 PM"
            onChange={setTime}
            value={time}
        />
    )}
</State>

If Time Picker's field is in focus, a dropdown to be shown with a list of availiable options to pick from. Options are filtered by step prop, but any intermediate value is still allowed to pick by typing.

Closest value, based on user's entry, to be highlighted in a dropdown. Dropdown behavior may be disabled with disableDropdown prop.

<State>
    {([time, setTime]) => (
        <Stack spacing={4} className="m-b-1">
            <Stack.Item fill>
                <Form.TimePicker
                    label="Time"
                    onChange={setTime}
                    value={time}
                />
            </Stack.Item>
            <Stack.Item fill>
                <Form.TimePicker
                    label="Time (dropdown is disabled, type in a value)"
                    disableDropdown
                    onChange={setTime}
                    value={time}
                />
            </Stack.Item>
        </Stack>
    )}
</State>

<State>
    {([time, setTime]) => (
        <Stack spacing={4} className="m-b-1">
            <Stack.Item fill>
                <Form.TimePicker
                    label="Time"
                    onChange={setTime}
                    value={time}
                />
            </Stack.Item>
            <Stack.Item fill>
                <Form.TimePicker
                    label="Time (dropdown is disabled, type in a value)"
                    disableDropdown
                    onChange={setTime}
                    value={time}
                />
            </Stack.Item>
        </Stack>
    )}
</State>

Time Range

Minimal and maximal time to be picked might be set with min and max props. Default time range is 12:00 АM to 23:59 PM.

<Stack spacing={4} className="m-b-1">
        <Stack.Item fill>
            <State>
                {([time, setTime]) => (
                    <Form.TimePicker
                        label="Arrival Time"
                        description="09:00 АM to 11:00 PM, by hour step"
                        step={60}
                        min="09:00 АM"
                        max="11:00 PM"
                        onChange={setTime}
                        value={time}
                    />
                )}
            </State>
        </Stack.Item>
        <Stack.Item fill>
            <State>
                {([time, setTime]) => (
                    <Form.TimePicker
                        label="Lunch Time"
                        description="12:00 PM to 02:00 PM, by 30 min step"
                        min="12:00 PM"
                        max="02:00 PM"
                        step={30}
                        onChange={setTime}
                        value={time}
                    />
                )}
            </State>
        </Stack.Item>
    </Stack>

<Stack spacing={4} className="m-b-1">
        <Stack.Item fill>
            <State>
                {([time, setTime]) => (
                    <Form.TimePicker
                        label="Arrival Time"
                        description="09:00 АM to 11:00 PM, by hour step"
                        step={60}
                        min="09:00 АM"
                        max="11:00 PM"
                        onChange={setTime}
                        value={time}
                    />
                )}
            </State>
        </Stack.Item>
        <Stack.Item fill>
            <State>
                {([time, setTime]) => (
                    <Form.TimePicker
                        label="Lunch Time"