Date Input

Lab component

Also known as

DateInputSingle, DateInputRange

Similar to

Resources

Support

DateInputSingle and DateInputRange provides an editable field where users can enter a single date or a date range.

Best practices

  • Wrap DateInputSingle and DateInputRange in FormField to provide the field with a visible label, help text, and a status message for validation feedback. This will ensure it complies with accessibility guidelines. You can find more information in the W3C form instructions.
  • The components clip text that extends beyond their visible area. All states have the same behavior—default, read-only, and disabled—whether or not the input has focus. To view the text in its entirety, the user can traverse the characters using the cursor.
Density
Mode

Empty read-only marker For accessibility purposes, we recommend you use

the emptyReadOnlyMarker prop to add a marker for empty read-only fields. This ensures it’s clear that a value is not necessary for the current selection or configuration.

Keyboard interactions

KeyFunction
Tab
  • If focus is above the input, Tab moves focus onto the input and highlights the text. If the input area is empty, Tab displays a text cursor in the input area. - If the input is disabled, Tab skips the input. - If the input has focus, Tab moves focus out of the input, to the next focusable component in the tab order.
Shift + Tab
  • If focused, Shift + Tab moves focus out of the component to the previous component in the tab order.
Enter
  • If an interactive adornment, e.g., a button, has focus, Enter activates the element.
Space
  • When the input area has focus, Space inserts a character at the position of the text cursor. - If an interactive adornment, e.g., a button, has focus, Space activates the element.
Right Arrow

When the input area has focus: - If text is highlighted, the highlight is removed and the text cursor is positioned at the right edge of the highlight. - If the text cursor is displayed, it is positioned on the alternative side of the following character. If there is no following character, there is no effect.

Left Arrow

When the input area has focus: - If text is in a highlighted state, Left Arrow removes the highlight and positions the text cursor at the left edge of the highlight. - If the text cursor is visible, Left Arrow positions it on the alternative side of the preceding character. If there's no preceding character, there's no effect.

Shift + Left Arrow / Shift + Right Arrow

When the input area has focus, drags selection over text characters, one at a time.

Backspace

When the input area has focus and: - Text is highlighted, this action removes all highlighted characters. - The text cursor is positioned to the right of text, this action removes the preceding character.

Alphanumeric / Special keys

When the input area has focus, this action inserts the relevant character at the position of the text cursor.

Control + A / Command + A

This action highlights all strings within the field.

Previous Page

Country symbol

Next Page

Date Picker