Skip to main content

ns-slot-picker

Introduction#

Ns-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 datesUse 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#

View example on Storybook

Usage example#

Slot picker

Specification#

AttributeTypeDefaultOptionsDescription
headingstring“”The heading of the slot picker.
slotdataarrayArray of objects representing dates.
EventDescription
changeDispatched when a specific slot is selected

Slot Data#

The 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

const slots = [{
name: '9am to 12pm',
value: '0900-1200'
}, {
name: '10am to 2pm',
value: '1000-1400'
}, {
name: '12am to 5pm',
value: '1200-1700'
}]
const slotData = [{ date: '2020-01-28', slots: slots }, { date: '2020-01-29', slots: slots }];

Component placement#

The 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!

Edit this page