Date Picker
Date pickers allow users to select a date from a calendar.
Use Cases
- Users should be able to:
- Navigate to and activate dates with assistive tech (i.e., focus)
Interaction & Style
Similarly styled components shouldn't be used together if they don't each pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of similar components.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) dates |
| Space / Enter | Activates the (non-disabled) dates |
Use Cases
- Users should be able to:
- Navigate to and activate dates with assistive tech (i.e., focus)
Interaction & Style
Similarly styled components shouldn't be used together if they don't each pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of similar components.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) dates |
| Space / Enter | Activates the (non-disabled) dates |
Use Cases
- Users should be able to:
- Navigate to and activate dates with assistive tech (i.e., focus)
Interaction & Style
Similarly styled components shouldn't be used together if they don't each pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of similar components.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) dates |
| Space / Enter | Activates the (non-disabled) dates |
Use Cases
- Users should be able to:
- Navigate to and activate dates with assistive tech (i.e., focus)
Interaction & Style
Similarly styled components shouldn't be used together if they don't each pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of similar components.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) dates |
| Space / Enter | Activates the (non-disabled) dates |