Textarea

Status

Component checklist

Key points

• Textareas are used to collect user data that is longer than that of a standard input, usually at least one sentence
• Textareas should visually be taller than an input field
• Textareas can be resizable or non-resizable
• It is best practice to include instructions as helper text, not as placeholders, so that the guidance is available as the user starts to input data
• Use this input type along with other form guidelines
• Textareas follow the same accessibility and labelling patterns as text inputs

Use a textarea to collect multi-line text data from users.

Usage

An example of a textarea

                                                        
                                                        
                                                            <label for="more-detail">Can you provide more detail?</label>
                                                        
                                                        <p id="helper-text>Do not include personal or financial information, like your National Insurance number or credit card details.</p>
                                                        
                                                        <textarea aria-describedby="helper-text" id="more-detail" name="more-detail" rows="5"></textarea>
                                                        
                                                            

Textareas can be used on forms standalone or as part of longer form.

It is best practice to include instructions as helper text, not as placeholders, so that the guidance is available as the user starts to input data.

Behaviour

Textareas act like other inputs, the user can click or tab into the input and enter data. Textareas can be set to be resizeable or not, giving the user control of the area they wish to enter data.

Validation

An example of textarea validation

                                                        
                                                        
                                                            <label for="more-detail">Can you provide more detail?</label>
                                                        
                                                        <p id="helper-text>Do not include personal or financial information, like your National Insurance number or credit card details.</p>
                                                        
                                                        <p id="error-msg">Enter more detail</p>
                                                        
                                                        <textarea aria-describedby="error-msg" id="more-detail" name="more-detail" rows="5"></textarea>