## TimeInput Use the TimeInput component to capture time input from user. Category: Date Pickers ### Simple Example This is a simple example of the TimeInput. You can enter a valid time string such as hh:mm:ss. Use the `withSeconds` prop to display seconds. ```python import dash_mantine_components as dmc import datetime component = dmc.Group( gap=50, children=[ dmc.TimeInput(label="What time is it now?"), dmc.TimeInput( label="What time is it now?", withSeconds=True, value="23:15:45", ), ], ) ``` ### TimePicker component TimeInput component is based on the native `input[type="time"]` element and does not support most of advanced features like choosing time format or custom dropdown with time select. If you need more features, use [TimePicker](/components/timepicker) component instead. `TimeInput` features/limitations: - Native `input[type="time"]` element - Native browser controls for time selection on mobile devices - Time format depends on the user's locale - Only native dropdown with hours/minutes/seconds, does not work in Firefox - Mobile Safari does not provide an option to select seconds ### Input Props TimeInput supports all props from Input and InputWrapper components such as `radius`, `size`, `required`, etc. ### With icon ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.TimeInput(leftSection=DashIconify(icon="bi:clock")) ``` ### Invalid State And Error You can display an error with a red border and add an error message. ```python import dash_mantine_components as dmc component = dmc.Stack( children=[ dmc.TimeInput(label="Enter Time:", w=100, error=True), dmc.TimeInput( label="Enter Time:", w=150, error="Enter a valid time", withSeconds=True, ), ], ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:------------|:-------------------------------|:-------------------------------------------------| | wrapper | .mantine-TimeInput-wrapper | Root element of the Input | | input | .mantine-TimeInput-input | Input element | | section | .mantine-TimeInput-section | Left and right sections | | root | .mantine-TimeInput-root | Root element | | label | .mantine-TimeInput-label | Label element | | required | .mantine-TimeInput-required | Required asterisk element, rendered inside label | | description | .mantine-TimeInput-description | Description element | | error | .mantine-TimeInput-error | Error element | ### Keyword Arguments #### TimeInput - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - debounce (number | boolean; default False): (boolean | number; default False): If True, changes to input will be sent back to the Dash server only on enter or when losing focus. If it's False, it will send the value back on every change. If a number, it will not send anything back to the Dash server until the user has stopped typing for that number of milliseconds. - description (a list of or a singular dash component, string or number; optional): Contents of `Input.Description` component. If not set, description is not rendered. - descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Description` component. - disabled (boolean; optional): Sets `disabled` attribute on the `input` element. - error (a list of or a singular dash component, string or number; optional): Contents of `Input.Error` component. If not set, error is not rendered. - errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Error` component. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input` component. - inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional): Controls order of the elements, `['label', 'description', 'input', 'error']` by default. - label (a list of or a singular dash component, string or number; optional): Contents of `Input.Label` component. If not set, label is not rendered. - labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Label` component. - leftSection (a list of or a singular dash component, string or number; optional): Content section rendered on the left side of the input. - leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional): Sets `pointer-events` styles on the `leftSection` element, `'none'` by default. - leftSectionProps (dict; optional): Props passed down to the `leftSection` element. - leftSectionWidth (string | number; optional): Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - maxTime (string; optional): Maximum possible string time, if withSeconds is True, time should be in format HH:mm:ss, otherwise HH:mm. - minTime (string; optional): Minimum possible string time, if withSeconds is True, time should be in format HH:mm:ss, otherwise HH:mm. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - n_blur (number; default 0): An integer that represents the number of times that this element has lost focus. - n_submit (number; default 0): An integer that represents the number of times that this element has been submitted. - name (string; optional): Name prop. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - placeholder (string; optional): Placeholder. - pointer (boolean; optional): Determines whether the input should have `cursor: pointer` style, `False` by default. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default. - readOnly (boolean; optional): Readonly. - required (boolean; optional): Adds required attribute to the input and a red asterisk on the right side of label, `False` by default. - rightSection (a list of or a singular dash component, string or number; optional): Content section rendered on the right side of the input. - rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional): Sets `pointer-events` styles on the `rightSection` element, `'none'` by default. - rightSectionProps (dict; optional): Props passed down to the `rightSection` element. - rightSectionWidth (string | number; optional): Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height. - size (optional): Controls input `height` and horizontal `padding`, `'sm'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - value (string; default ''): Value for controlled component. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withAsterisk (boolean; optional): Determines whether the required asterisk should be displayed. Overrides `required` prop. Does not add required attribute to the input. `False` by default. - withErrorStyles (boolean; optional): Determines whether the input should have red border and red text color when the `error` prop is set, `True` by default. - withSeconds (boolean; optional): Determines whether seconds input should be rendered. - wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the root element.