Skip to main content
Components

Sheet selector

Ask the user to pick one from multiple worksheets in a spreadsheet they uploaded.

Code snippets

Create radio buttons for each sheet using the GOV.UK Design System Radios component and then lay out up to 10 rows of data for each sheet using Table view components.

Add the rd-sheet-preview class to the govuk-radios container. Add a data-preview-index attribute to each <input type="radio"> which should be the index of the table view to display when this radio button is checked.

You can pre-populate a default sheet to be displayed by adding the checked attribute to its corresponding radio button.

<div class="govuk-radios rd-sheet-preview" data-module="govuk-radios">
    <div class="govuk-radios__item">
        <input class="govuk-radios__input" type="radio" id="Commodities"
            name="sheet" value="Commodities" data-preview-index="0">
        <label class="govuk-label govuk-radios__label" for="Commodities">
            Commodities
        </label>
    </div>
    <!-- Put more radio button items here -->
</div>

Wrap the table views in an element with class rd-sheet-selector-previews. Use a <caption> element to display how many rows from the sheet are being shown. 

<div class="rd-sheet-selector-previews">
    <div>
        <!-- Put table view here -->
    </div>
    <!-- Put more table views here -->
</div>

In the Prototype Kit, call the importerSheetSelector macro to automatically display a sheet selector and associated data previews.

{% from "importer/macros/sheet_selector.njk" import importerSheetSelector %}
{{ importerSheetSelector(data) }}

The macro accepts the following options:

importerSheetSelector options
Name Type Description
data Prototype Kit session The automatically populated data variable containing the user's uploaded sheet and options.
legend Text (optional, default: blank) The heading to describe the purpose of the radio buttons.

When to use this component

Use this component when users can only submit a single sheet of data to the service.

It is sometimes still helpful to show the selector even when the user's uploaded file contains a single sheet, as the data preview helps confirm that they have selected the correct file.

When to not use this component

Do not use this component to display all of the user's data from each sheet. Up to 10 rows are usually sufficient for users to identify the correct sheet.

Accessibility

The design of the sheet selector includes some accessibility features: