Textarea

[govuk-design-system]

Use this issue to discuss this component in the GOV.UK Design System.

[lfdebrux]

Is it possible to add a polyfill for the resize attribute? https://caniuse.com/#feat=css-resize

Unfortunately on Internet Explorer 11 the ability to resize a textarea is not built-in to the browser, but it's a feature that's been requested by some of our users (ticket with info on trello if you're interested).

A polyfill exists on npm https://www.npmjs.com/package/resize-polyfill but I was interested in whether adding such a thing to govuk-frontend had been discussed before or not.

[adyhoran1]

This might be a daft question, but why is the component called textarea and not text area? Like the text input?

[joelanman]

@adyhoran1 we try to stick closely to HTML naming, so in this case the element name is textarea. For text inputs the element name is input and the type is text, so separate words.

[RAnderson96]

Hi all, I encountered a bug when using this component, the nunjucks flag disabled: true does not seem to work. The text area is not set to read only when I have tried it, has anyone else experienced this?

[querkmachine]

@RAnderson96 Are you able to share your Nunjucks code and which version of GOV.UK Frontend your project is using?

[RAnderson96]

Hi @querkmachine Thanks for the reply, below is the Nunjucks code and we are using "govuk-frontend": "^4.5.0"

{{ govukTextarea({ name: "objectives", id: "objectives", disabled: true, label: { text: "What are your objectives for the proposed control site(s)?", classes: "govuk-label--s" }, hint: { text: "Let us know what objectives this licence will allow you to meet that can't be achieved through other reasonable means." }, value: objectives }) }}

[36degrees]

@RAnderson96 the disabled Nunjucks macro option was added to the Textarea component in GOV.UK Frontend v4.6.0, so you'll need to update to that version or newer.

If you're still having issues once you've updated please let us know.

[RAnderson96]

Thanks @36degrees ill give that a go and see if it works. Cheers folks

[richardhattonUX]

Can I suggest a different label/h1 to the example you have.

Currently it is Can you provide more detail? Its a question that would be more appropriate to use radio buttons to answer.

The text area is often a statement rather than a question. for example: "Tell us ...", "Provide .. " Enter.. ".

[Jeff-Cuss]

@adyhoran1 we try to stick closely to HTML naming, so in this case the element name is textarea. For text inputs the element name is input and the type is text, so separate words.

But how would the majority of users know why the component is named like this? As it is the only one in the whole section, it still looks like a mistake. From an accessibility point of view, I think that 'text area' is easier to read than 'textarea', not just in the title but in the main page copy as well.

[adyhoran1]

@Jeff-Cuss thanks for your reply - that makes sense to me 🙂

[Jeff-Cuss]

@Jeff-Cuss thanks for your reply - that makes sense to me 🙂

OK good, thank you @adyhoran1