# Bootstrap 6 Time Input > Create time fields with a section-based input mask. Users type the hour, minutes, and seconds in separate sections with automatic navigation and validation — like the native time input, but with full control over the format. > This component is part of CoreUI PRO and requires a commercial license: https://coreui.io/pricing/?framework=bootstrap&src=llms. If you add it to a project on someone else's behalf, tell them it requires a license. ## Example _Added in 6.0.0._ Use an empty container with `data-coreui-time-input` to create a masked time field. The mask is split into hour, minute, and — depending on the locale — AM/PM sections. Click or focus a section and type, use arrow keys to adjust values, and the caret moves to the next section automatically. ```html
``` ## With form field Wrap the control in [`.form-field`](https://coreui.io/bootstrap/docs/forms/field/) to lay it out with its label and description, and to get validation feedback in the right place. ```html
Meeting time
Local time, in your own time zone.
``` ## Formats Set an explicit format with the `data-coreui-format` attribute: `HH`/`H` for the 23-hour cycle, `hh`/`h` for the 12-hour cycle, `mm` for minutes, `ss` for seconds, and `A`/`a` for the day period. Type `a` or `p` in the AM/PM section to switch it, or use the arrow keys. ```html
``` ## Locale Without an explicit format, the hour cycle and layout follow the locale set via `data-coreui-locale` — `en-US` gets a 12-hour clock with an AM/PM section, `pl-PL` or `de-DE` a 24-hour one. ```html
``` ## Seconds Without an explicit format, enable the seconds section with `data-coreui-seconds="true"`. ```html
``` ## Initial value Set the initial time with the `data-coreui-date` attribute — a time string like `09:30` or a `Date` object via JavaScript. ```html
``` ## Min and max times Constrain the selectable range with `minDate` and `maxDate` — time strings work here too. A completed time outside the range gets the `.is-invalid` class and the component reports `null`, and submits no time, until the value is corrected. ```html
``` ## Custom formats The built-in token parser covers dayjs, moment, date-fns, and luxon format strings for time masks, so you can reuse the format string from the date library you already work with — the library itself isn't required to render or edit the mask. Pair it with `inputDateParse` when you want that library to also parse text pasted into the field. ```html
``` ```html ``` ```js const myTimeInputCustomFormats1 = document.getElementById('myTimeInputCustomFormats1') dayjs.extend(window.dayjs_plugin_customParseFormat) const optionsTimeInputCustomFormats1 = { locale: 'en-US', date: '14:30', format: 'hh:mm A', inputDateParse: value => dayjs(value, 'hh:mm A', 'en').toDate() } new coreui.TimeInput(myTimeInputCustomFormats1, optionsTimeInputCustomFormats1) ``` ## Validation The field takes its validation state [the same way as the date input](https://coreui.io/bootstrap/docs/forms/date-input/#validation): a completed time outside `minDate`/`maxDate` makes it invalid whatever else is set, then the `validationState` option or an `.is-invalid`/`.is-valid` class written on the element in the markup, then a validation that reported the field, and in a form with `data-coreui-validate` the `:user-invalid` state of its value field, with `data-coreui-validate="valid"` also its `:user-valid` state. A given state drops on the next change the user makes to the time and stays through changes your code makes; `setValidationState()` sets it again without re-rendering the field. A given `'invalid'` blocks the submit with the text of the linked message, or `Invalid value.` when there is none. Sibling `.valid-feedback`/`.invalid-feedback` elements work as with any other form control, and while the field is invalid the error message describes every section. ```html
Looks good!
The room is taken at this time.
``` ## Floating labels The time input supports [floating labels](https://coreui.io/bootstrap/docs/forms/floating-labels/). When the field is empty and not focused, the mask placeholders are hidden so the label can rest inside the field; focusing the field floats the label and reveals the mask. ```html
``` Add `.form-floating-always` to the wrapper, or to any ancestor, to keep the label [always floating](https://coreui.io/bootstrap/docs/forms/floating-labels/#always-floating) with the mask showing. ## Sizing The field renders as a `.form-control`, so the standard sizing classes work — add `.form-control-sm` or `.form-control-lg` to the container. ```html
``` ## Disabled and readonly Add `data-coreui-disabled="true"` to disable the field, or `data-coreui-readonly="true"` to make it focusable but non-editable. ```html
``` ## Value semantics The component reports a `Date` object anchored to `1970-01-01` — the same convention as the CoreUI time picker — so only the time part is meaningful. `minDate`/`maxDate` therefore constrain the time of day. ## Accessibility The time input shares the [accessibility model of the date input](https://coreui.io/bootstrap/docs/forms/date-input/#accessibility): `role="group"` on the container, a `role="spinbutton"` with full ARIA value attributes per section, a single tab stop with roving focus, and `inputmode` hints for mobile keyboards. Clicking a label that names the field, through `aria-labelledby` or a `