GitHub icon

States

Default Value

Label Help

Labels can have a help icon with a tooltip to provide additional context to a label.

Required and Optional

A visual indicator can be applied on a Date Picker's label.

<Form>
	<State initial={undefined}>
		{([date, setDate]) => (
			<Form.DatePicker
				label="Date Label"
				value={date}
				labelProps={{
					required: true
				}}
				onChange={(v) => setDate(v)}
			/>
		)}
	</State>
	<State initial={undefined}>
		{([date, setDate]) => (
			<Form.DatePicker
				label="Date Label"
				value={date}
				labelProps={{
					optional: true
				}}
				onChange={(v) => setDate(v)}
			/>
		)}
	</State>
</Form>

With Placeholder

Disabled

Error

Accessibility

The user should be able to choose a date by typing into the input or by selecting a date from the calendar dropdown. The user should be able to use either method.

Keyboard Support

When focus is on the input, press space to open and escape to close the calendar.
Use tab / shift + tab to change focus from the calendar and input.
When focus is on the calendar, use the arrow keys to traverse through dates and enter to select a date.

Content Guidelines

Most of the content guidelines from Forms applies to the Date Picker.

Use a label for all input fields

A label is a short, meaningful description that clearly indicates what the user is expected to enter. Labels should be 1 to 3 words and written in title case. Labels should primarily be nouns. Avoid using labels as CTAs. A label is not inline help and shouldn’t be used to provide instruction.

Follow capitalization rules

Input labels should be written in title case.

Show hints, formatting, and requirements

Inline help should explain a feature or the outcome of the actions the user is about to take.

The description should adapt to the situation and context. The guidance could be focused on what is needed, or it could describe how to enter it.

Best Practices

Date pickers should:

Use smart defaults
Not be used to enter a date that is many years in the future or the past

Components

For ranges of dates, use the Date Range Picker.
For user selection of time, use the Time Picker.

Patterns

Form design pattern for how related controls are ordered.

Importing

import { DatePicker } from '@servicetitan/design-system';

Date Picker