Components/Time

The time component is used to select a time value. It can be used to choose hours, minutes, seconds and/or a given period of the day. This component is rarely used alone and will likely be paired with the **Time Picker** pattern. The time component consists of three main styles to indicate a specific state: | Style       | Modifier class | Description | | -------------| :------------- | :-------------- | | 01 | .fd-time__item | Class used to style inactive time slider items. | | 01 | .fd-time__item--collapsed | Class used to style collapsed time slider items. When this item is displayed, all inactive items below/above it are collapsed (out of sight). | | 01 | .fd-time__item--current | Class used to style current (active) time slider items. |

**Use the time component in Time Picker if:** - You want the user to select a time. - You want the user to select a time range. In this case, one time picker can be used to set the starting time and a second one to set the end time. - You want the user to select a detailed duration, such as 1 minute and 30 seconds. **Do not use the time component in Time Picker if:** - You want the user to select a duration such as 15 minutes, 30 minutes, 1 hour, or 2 hours. In this case, use the **Select** component instead. - You want the user to select a date and time. In this case, use the **Date Picker**. **Use the time component in Time Picker if:** - You want the user to select a time. - You want the user to select a time range. In this case, one time picker can be used to set the starting time and a second one to set the end time. - You want the user to select a detailed duration, such as 1 minute and 30 seconds. - You want the user to select a duration such as 15 minutes, 30 minutes, 1 hour, or 2 hours. In this case, use the **Select** component instead. - You want the user to select a date and time. In this case, use the **Date Picker**.

The default time component is displayed in cozy mode, which is ideal for mobile screens. Only one item and wrapper should be active at a time with the \

Time can be optimized for tablet screens, which adds padding on each side of the component. To display the time component for tablet, add the \

Time can be scrollable by adding the \