Data Display
Time Slot
A Time Slot represents a specific period available for scheduling, booking, or appointments.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features5 checks
- Grid role on the expanded slot table with row/cell semantics
- aria-selected on each slot cell reflects selection state
- Keyboard navigation using Arrow keys within the slot grid
- Holiday and weekly-off cells are aria-disabled
- Calendar in compact view uses role="grid" with day headers as columnheaders
When to use this component
✓Do's
- •Appointment booking across multiple days (expanded)
- •Single-day time selection with a calendar (compact)
- •Communicating public holidays and weekly off days
- •Government service portals with capacity constraints
✗Don'ts
- •For date-only selection, use DatePicker instead.
- •For non-appointment data grids, use Table.
- •Open-ended scheduling without defined capacity
Do's and Don'ts
✓ Do's
5 slots
No slots available
2 slots
Use distinct colors and labels to communicate each slot state clearly.
✗ Don'ts
9:00 AM
9:30 AM
10:00 AM
Don't show all cells identically, users can't tell which slots are available.