The date textbox offers a calendar based "date picker" as an alternative to manual text entry.

Single Select Date Textbox

The single select date textbox consists of a textbox plus icon button . The icon button launches an interactive calendar inside of a flyout.

The aria-label of the calendar button should be intuitive enough for users of speech recognition software to identify.

NOTE: a fully functional interactive calendar requires JavaScript and is outside the scope of a CSS library. The calendar in this example is a simple readonly version.

Disabled Date Textbox

The disabled date textbox is a disabled textbox input with a calendar icon button that's also disabled. Use the disabled attribute on the input as well as button .

Date Range Textbox

Selecting a date range requires two textboxes; one for the start date and one for the end date.