Time selection

Time Selection

JS modules

There is an associated JS module which handles showing/hiding the correct Morning or Afternoon section based on the time period selected. This works by ataching a data-module attribute to the smbc-time div.

data-module="smbc-time"

This data module works by using the data-aria-controls on the smbc-time__period__input radio input to show and hide the related time period for the selected day. The value of data-aria-controls is the id for the time period section div for that day. When the Morning radio input is selected, the JS will find the div by the data-aria-controls and make this visible and hide the afternoon slots.

Time selection is not covered within the GOVUK Design System. The time component can be used on it's own but it's more likely to be used in conjunction with the calendar component in forms that provide a booking service with appointment time selection, such as an appointment, a trip or a test.

For further information on how the pattern behaviour should be implemented look at book pattern

Example implementation

Implementation notes

This implementation assumes there will only ever be 2 time periods to choose from (eg Morning/Afternoon or Day/Evening)
The number of div inside class smbc-time--body must always be a multiple of 3 and the label must have the appropriate override class (left/centre/right) for alignment. Where a div does not have a time to offer it can just be left empty.

<div class="smbc-time" data-module="smbc-time">
    <div class="smbc-time__header">
        <div class="smbc-time__period">
            <input class="smbc-time__period__input" type='radio' value='morning' name='time-of-day' id='morning'/>
            <label class="smbc-time__period__label smbc-time__period__label--left" for='morning'>Morning</label>
        </div>
        <div class="smbc-time__period">
            <input class="smbc-time__period__input" type='radio' value='afternoon' name='time-of-day'  id='afternoon'/>
            <label class="smbc-time__period__label smbc-time__period__label--right" for='afternoon'>Afternoon</label>
        </div>
    </div>
    <div class="smbc-time__body">
        <div class="smbc-time__time">
            <input class="smbc-time__time__input" type='radio' value='8:00am' name='time' id='8:00am'/>
            <label class="smbc-time__time__label smbc-time__time__label--left" for='8:00am'>8:00am</label>
        </div>
        <div class="smbc-time__time">
            <input class="smbc-time__time__input" type='radio' value='9:30am' name='time' id='9:30am'/>
            <label class="smbc-time__time__label smbc-time__time__label--centre" for='9:30am'>9:30am</label>                
        </div>
        <div class="smbc-time__time">
            <input class="smbc-time__time__input" type='radio' value='10am' name='time' id='10am'/>
            <label class="smbc-time__time__label smbc-time__time__label--right" for='10am'>10am</label>
        </div>
        <div class="smbc-time__time">
            <input class="smbc-time__time__input" type='radio' value='10:30am' name='time' id='10:30am'/>
            <label class="smbc-time__time__label smbc-time__time__label--left" for='10:30am'>10:30am</label>
        </div>
        <div class="smbc-time__time">
            <input class="smbc-time__time__input" type='radio' value='11am' name='time' id='11am'/>
            <label class="smbc-time__time__label smbc-time__time__label--centre" for='11am'>11am</label>
        </div>
        <div class="smbc-time__time"></div>       
    </div>
</div>