Use date input for exact known dates entered as day, month, and year; use input mask for fixed-format codes, text input for ordinary one-line text, and select only for constrained date parts or known option sets.
Use date input for exact known dates entered as day, month, and year; use input mask for fixed-format codes, text input for ordinary one-line text, and select only for constrained date parts or known option sets.
Practice the judgment: Imagine this situation: A date mask rejects a user who types Jan for the month even though the intended component should tolerate month names. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Date input | Input mask | Text input | Select |
|---|---|---|---|---|
| UI or UX | UI + UX - Grouped manual exact-date entry | UI + UX - Fixed-format text entry control | UI + UX - Single-line freeform data-entry control | UI + UX - Single-choice dropdown control |
| UI guidance | Render day, month, and year as separate text inputs inside one fieldset with a legend that asks the full date question and a hint containing a valid example date. | Show a persistent label, visible example or hint, fixed grouping, literal separators, and field-adjacent error text so users understand which characters are typed and which are supplied by the mask. | Render a persistent label, appropriately sized single-line input, optional hint, visible focus state, and nearby error text that is programmatically associated with the field. | Render a persistent label, hint text, native closed value, finite option list, selected option, and validation state. |
| UX guidance | Preserve every typed part, tolerate common month names, normalize to a canonical date only after validation, and explain exactly which part is missing, impossible, or out of range. | Use an input mask to help users enter data that has a stable character structure, especially when grouping matches the physical document, card, container code, or serial key users are copying from. | Let users edit normally, validate after interaction or attempted submit, preserve their typed value after errors, and explain exactly how to fix invalid or missing text. | Help the person reach a clear task outcome. |
| Good UI | A passport issued question uses a fieldset legend, hint example 27 3 2007, separate Day, Month, and Year labels, numeric input mode, and a group error that names the missing year. | A container number field shows the example ABCD 123456 7, groups pasted characters into that shape, and displays the raw value ABCD1234567 before submit. | A reference-name field has a visible label, hint, medium width, focus ring, and error message beneath the hint when submitted empty. | Persistent label, hint text, visible selected value, readable options, and clear required validation state. |
| Bad UI | A single date field shows DD/MM/YYYY inside the input and removes the only instruction when users start typing. | A phone field hard-codes a domestic mask and rejects valid international numbers. | The only instruction is placeholder text that disappears when the user starts typing. | Placeholder as the only label. |
| Good UX | A user types 7 Jan 1984, sees month normalized to 01, submits, and reviews canonical value 1984-01-07. | A user submits ABCD 123 and receives a precise error that the six-digit serial group and check digit are incomplete. | A user leaves the required field blank, sees an error only after submit, returns to the same field, and their later typed value clears the error. | Users can open, scan, choose one value, and review the selected value after close. |
| Bad UX | A user pastes a known birth date into a masked field and the interface discards separators and jumps focus unpredictably. | A user pastes a valid value with spaces and the mask discards characters because it only supports one-character-at-a-time typing. | Validation fires on the first focus event and blocks typing before the user has had a chance to answer. | Hiding two obvious critical choices in a dropdown. |
| Best fit | Users already know the exact date or can look it up easily. | The value has a stable character pattern and users benefit from live grouping. | The answer is short and user-authored. | The user chooses one option from a moderate known list. |
| Avoid when | Users are unlikely to know the exact date. | Valid values have many lengths, regions, scripts, or exception formats. | The answer is a paragraph, comment, address block, or explanation requiring multiple lines. | The option set is short and comparison matters. |
| Required state | Empty untouched grouped date fields with legend, hint, and visible part labels. | Empty untouched state with label and visible format example. | Empty untouched state with persistent label and optional hint. | Closed state with empty option or current selected value. |
| Accessibility burden | Group the three inputs in a fieldset with a legend that states the full date question. | Connect hint, format example, canonical-value note, and error text to the input with descriptive relationships where supported. | Associate every text input with a visible label or equivalent accessible name that matches the visible question. | Prefer native semantics or implement equivalent name, role, state, and keyboard behavior. |
| Common misuse | Using one freeform field with disappearing format instructions. | Rejecting pasted values that include spaces, dashes, parentheses, or lowercase characters. | Using placeholder text as the only label or instruction. | Using select to hide two or three obvious choices that should be compared. |