City of Ghent Style Guide

Textarea

When to use this component

Use the textarea component to let users enter text that is longer than a single line.

When not to use this component

Do not use the textarea component to let users enter:

  • Text or a value that is not longer than a single line
  • A date
  • A time
  • A number
  • A password
  • An email
  • A telephone number

In these cases, use input component instead.

Usage, behavior, layout and validation

The textarea component is a form element that should always be used in a form. For a description of the usage, the behavior, the layout and validation of form elements, see the form component documentation.

Textarea 

{% include '@form-item' with _context %}
 
<!-- Default -->
<div class="form-item ">
    <label for="textearea">Textarea
    </label>
    <div class="form-columns">
        <div class="form-item-column">
            <textarea name="textearea" id="textearea">
</textarea>
        </div>
        <div class="form-item-column">
        </div>
    </div>
</div>


<!-- With Error -->
<div class="form-item  error">
        <label for="textarea--error">Textarea
        </label>
        <div class="field-message " id="textarea--error-description">
            You can add an optional field description here.
            <div class="accolade "></div>
        </div>
        <div class="form-columns">
            <div class="form-item-column">
                <textarea name="textarea--error" id="textarea--error" class="error">
</textarea>
            </div>
            <div class="form-item-column">
                <div class="field-message error" role="alert" id="textarea--error-message">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.
                    <div class="accolade "></div>
                </div>
            </div>
        </div>
    </div>


<!-- With Success -->
<div class="form-item  success">
        <label for="textarea--success">Textarea
        </label>
        <div class="field-message " id="textarea--success-description">
            You can add an optional field description here.
            <div class="accolade "></div>
        </div>
        <div class="form-columns">
            <div class="form-item-column">
                <textarea name="textarea--success" id="textarea--success" class="success">
</textarea>
            </div>
            <div class="form-item-column">
                <div class="field-message success" role="alert" id="textarea--success-message">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.
                    <div class="accolade "></div>
                </div>
            </div>
        </div>
    </div>


/* Default */
{
  "id": "textearea",
  "input_component": "input-textarea",
  "label": "Textarea"
}


/* With Error */
{
  "id": "textarea--error",
  "input_component": "input-textarea",
  "label": "Textarea",
  "modifier": "error",
  "field_description": "You can add an optional field description here.",
  "field_message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex."
}


/* With Success */
{
  "id": "textarea--success",
  "input_component": "input-textarea",
  "label": "Textarea",
  "modifier": "success",
  "field_description": "You can add an optional field description here.",
  "field_message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex."
}