ns-slot-picker
#
IntroductionNs-slot-picker is used to allow the user to select a time slot from one or more dates and time slots.
Ns-slot-picker is used any time you want a customer to select a time slot. This would typically be used for booking an appointment. It can display time slots for a single day or multiple days. It can be used on it's own or upfront before displaying ns-appointment-picker. It is also used in ns-appointment-picker.
#
Best practice๐ Do's | ๐ Don'ts |
---|---|
Use this when the customer needs to select a specific appointment slot from a known selection of dates | Use this when there are many (more than 5) dates to choose from, use ns-appointment-picker |
Use this to present a number of suitable slots upfront to a customer | |
Use this to help a customer find the soonest available appointment time when there is poor appointment availability |
#
Usage#
Usage example#
SpecificationAttribute | Type | Default | Options | Description |
---|---|---|---|---|
heading | string | โโ | The heading of the slot picker. | |
slotdata | array | Array of objects representing dates. |
Event | Description |
---|---|
change | Dispatched when a specific slot is selected |
#
Slot DataThe slotData array should consist of objects containing a date property and a slots property.
date: String - eg. 2020-01-28 (28th January 2020) slots: Array of objects with a name and value property
#
Component placementThe ns-slot-picker component can be used in the following components:
Design Tokens
You can change the branded look and feel of the ns-slot-picker by modifying these options in the design tokens.
Read more about design tokens in our getting started guide.
{
"fieldset-legend-typography": "action-regular",
"radio-label-typography": "action-regular",
"unavailable": {
"date-typography": "action",
"message-typography": "action-regular"
}
}
#
Feedback- Do you have insights or concerns to share? You can raise an issue via Github bugs.
- See all the issues already raised via Github issues.
๐ฉ ๐ ๐ฆ You can also contact the team on Slack on the #product-nucleus
channel!