Repository: miller-columns-element
Miller columns (cascading lists) for hierarchical topic selection on GOV.UK
- GitHub
- miller-columns-element
- Ownership
- #govuk-whitehall-experience-tech
- Category
- Utilities
- Links
We’d like to set some cookies to understand how you use this site and remember your settings.
We also use cookies set by other sites to help us deliver content from their services.
You have accepted additional cookies. You can change your cookie settings at any time.
You have rejected additional cookies. You can change your cookie settings at any time.
Miller columns (cascading lists) for hierarchical topic selection on GOV.UK
Express a hierarchy by showing selectable lists of the items in each hierarchy level.
Selection of any item shows that item’s children in the next list.
npm install --save miller-columns-element
This element is expected to be used in an application with govuk-frontend installed. The expected CSS dependencies are outlined in examples.scss.
<p id="navigation-instructions" class="govuk-body govuk-visually-hidden">
Use the right arrow to explore sub-topics, use the up and down arrows to find other topics.
</p>
<miller-columns-selected id="selected-items" for="miller-columns" class="miller-columns-selected"></miller-columns-selected>
<miller-columns class="miller-columns" for="taxonomy" selected="selected-items" id="miller-columns" aria-describedby="navigation-instructions">
<ul id="taxonomy">
<li>
<input class="govuk-checkboxes__input" type="checkbox" id="parenting-childcare-and-children-s-services">
<label class="govuk-label govuk-checkboxes__label" for="parenting-childcare-and-children-s-services">
Parenting, childcare and children's services
</label>
<ul>
<li>
<input class="govuk-checkboxes__input" type="checkbox" id="divorce-separation-and-legal-issues">
<label class="govuk-label govuk-checkboxes__label" for="divorce-separation-and-legal-issues">
Divorce, separation and legal issues
</label>
</li>
<li>
<input class="govuk-checkboxes__input" type="checkbox" id="childcare-and-early-years">
<label class="govuk-label govuk-checkboxes__label" for="childcare-and-early-years">
Childcare and early years
</label>
</li>
</ul>
</li>
</ul>
</miller-columns>
Browsers without native custom element support require a polyfill.
npm install
npm test
To continuously build files while developing run:
npm run watch
To install and run a local HTTP server using Node.js:
npm install -g http-server
http-server
To manually check examples in a web browser or using BrowserStack:
http://127.0.0.1:8080/examples/index.html (default example)http://127.0.0.1:8080/examples/checkboxes-checked.html (with pre-selected items at page load)http://127.0.0.1:8080/examples/miller-columns-test.html (example used for tests)Alternatively, you can open one of the HTML files in the /examples directory for a quick preview.
Distributed under the MIT license. See LICENSE for details.