Add an example of a select component with hint text

[vanitabarrett]

Related documentation

https://design-system.service.gov.uk/components/select/

Suggestion

Add a visual example of a select with hint text.

Evidence (where applicable)

We had a question on support asking whether it's possible to add hint text for the select component like you can for radios and checkboxes. The user missed the documentation for our Nunjucks macro options (https://github.com/alphagov/govuk-design-system/issues/1085) and didn't realise you could pass hint text in the same way for the select. Perhaps a visual example would help?

[Ciandelle]

Can I confirm what type of example we want? Would it be just an image or an interactive version with the HTML and nunjucks code?

[vanitabarrett]

@Ciandelle We normally opt for an interactive version with code where possible, and images as a last resort. As the select component is something in GOV.UK Frontend I think we should add an interactive example.

[Ciandelle]

Thanks! I have a HTML version already but I'll need a little help with the nunjucks one :) I'll also need someone to take a look to make sure I've got the HTML right 🤞

[vanitabarrett]

@Ciandelle From what I remember, we can build an example using Nunjucks (e.g: breadcrumbs component example) and it'll automatically generate the Nunjucks and HTML code snippets for us when we reference that example in the guidance (e.g: breadcrumbs guidance)

Happy to help walk you through it at some point, if that'd be helpful!

[Ciandelle]

Can I just double check what the hint text would be used for? I'm under the impression it's to help the user understand what they need to do, but I have concerns that we would recommend against services needing to do this? Happy to talk directly to the person who raised it if that's easier?

[vanitabarrett]

@Ciandelle It was originally raised by @andysellick (who is on leave at the moment), but I can't remember what he was planning to use the hint text for. Might be worth bringing up within the team or looking at guidance for other components that support hint text?

[edwardhorsford]

Here's three from my service - these are all the default view that gets progressively enhanced to an autocomplete.

[sfount]

We (GOV.UK Pay) have a very similar pattern to @edwardhorsford which also gets progressively enhanced with a multi-select autocomplete.

It's a filter pattern geared at a case management/ service admin user, I'm not personally familiar with any design/ research that went into it when it was originally built.

[Ciandelle]

Thank you all for your brilliant examples - that's really helpful!

[edwardhorsford]

A slight quirk - some of these example hints probably aren't needed for selects. The reason I suspect they've been added is because with the autocomplete it's unclear you'll be able to choose from items - so the hint is more a needed for when the autocomplete is on.