Textarea - Viacriadkové textové pole

Viacriadkové textové pole

Otvoriť príklad na novej záložke

Code

Markup

<div data-module="govuk-textarea" class="govuk-form-group">
  <label class="govuk-label" for="more-detail">
    Can you provide more detail?
      <span class="idsk-required">*</span>
  </label>
  <div class="idsk-textarea__wrapper">
    <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5"
    maxlength="200"></textarea>
    <span class="idsk-textarea--counter" aria-live="polite">
      <span>0</span> / 200
    </span>
  </div>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  name: "more-detail",
  id: "more-detail",
  label: {
    text: "Can you provide more detail?"
  }
}) }}

Viacriadkové textové pole with hint

Otvoriť príklad na novej záložke

Code

Markup

<div data-module="govuk-textarea" class="govuk-form-group">
  <label class="govuk-label" for="more-detail">
    Can you provide more detail?
      <span class="idsk-not-required">(nepovinné)</span>
  </label>
  <div class="idsk-textarea__wrapper">
    <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5"
    maxlength="200"></textarea>
    <span class="idsk-textarea--counter" aria-live="polite">
      <span>0</span> / 200
    </span>
  </div>
  <span class="idsk-textarea__input-description">Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.</span>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  name: "more-detail",
  id: "more-detail",
  label: {
    text: "Can you provide more detail?",
    notRequired: "nepovinné"
  },
  formGroup: {
    afterInput: {
      text: "Don't include personal or financial information, eg your National Insurance number or credit card details."
    }
  }
}) }}

Viacriadkové textové pole with custom length

Otvoriť príklad na novej záložke

Code

Markup

<div data-module="govuk-textarea" class="govuk-form-group">
  <label class="govuk-label" for="more-detail">
    Can you provide more detail?
      <span class="idsk-required">*</span>
  </label>
  <div class="idsk-textarea__wrapper">
    <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5" maxlength="500"
    maxlength=""></textarea>
    <span class="idsk-textarea--counter" aria-live="polite">
      <span>0</span> / 500
    </span>
  </div>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  name: "more-detail",
  id: "more-detail",
  label: {
    text: "Can you provide more detail?"
  },
  attributes: {
    maxlength: "500"
  }
}) }}

Viacriadkové textové pole with error message

Otvoriť príklad na novej záložke

Code

Markup

<div data-module="govuk-textarea" class="govuk-form-group">
  <label class="govuk-label" for="no-ni-reason">
    Why can’t you provide a National Insurance number?
      <span class="idsk-required">*</span>
  </label>
  <div class="idsk-textarea__wrapper">
    <textarea class="govuk-textarea govuk-textarea--error" id="no-ni-reason" name="no-ni-reason" rows="5"
    maxlength="200"></textarea>
    <span class="idsk-textarea--counter" aria-live="polite">
      <span>0</span> / 200
    </span>
  </div>
  <p id="no-ni-reason-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> You must provide an explanation
  </p>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  name: "no-ni-reason",
  id: "no-ni-reason",
  label: {
    text: "Why can’t you provide a National Insurance number?"
  },
  errorMessage: {
    text: "You must provide an explanation"
  }
}) }}

Viacriadkové textové pole with label as page heading

Otvoriť príklad na novej záložke

Code

Markup

<div data-module="govuk-textarea" class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="textarea-with-page-heading">
      Full address
        <span class="idsk-required">*</span>
    </label>
  </h1>
  <div class="idsk-textarea__wrapper">
    <textarea class="govuk-textarea" id="textarea-with-page-heading" name="address" rows="5"
    maxlength="200"></textarea>
    <span class="idsk-textarea--counter" aria-live="polite">
      <span>0</span> / 200
    </span>
  </div>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  id: "textarea-with-page-heading",
  name: "address",
  label: {
    text: "Full address",
    classes: "govuk-label--l",
    isPageHeading: true
  }
}) }}