textarea

This component uses the same base styling as form/form-element/input.

Information

Folder
src/components/elements/form-element/textarea

Files

Schema
// src/components/elements/form-element/textarea/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/form-element/textarea
additionalProperties: false
properties:
  attributes:
    type: object
  classes:
    type: array
    items:
      type: string
  id:
    type: string
  value:
    type: string
  disabled:
    type: boolean
  required:
    type: boolean
  invalid:
    type: boolean
Mocks
// src/components/elements/form-element/textarea/mocks.yaml

id: textarea-default
$variants:
  - $name: Invalid
    invalid: true
    id: textarea-invalid
  - $name: Filled out
    value: >-
      Consectetur pariatur magna cillum ea irure veniam culpa ut. Officia
      voluptate fugiat tempor commodo ullamco. Ullamco elit sunt dolore et enim
      adipisicing. Labore ad in adipisicing amet aliqua commodo fugiat fugiat
      aute. Ea esse pariatur in nisi aliqua ad qui id consectetur. Incididunt
      mollit exercitation id ullamco nisi ut sint occaecat pariatur excepteur
      velit adipisicing.


      Est irure qui dolor excepteur. Labore ex officia velit duis aliqua elit in
      magna. Culpa ullamco consectetur pariatur ea ipsum sunt esse dolore minim
      culpa anim. Officia enim ipsum quis aliquip et et eu laborum ea enim
      voluptate.
    id: textarea-filled-out
  - $name: Disabled
    disabled: true
    id: textarea-disabled
  - $name: Invalid and filled-out
    value: >-
      Elit cillum deserunt officia sint exercitation ex consequat aute. Non quis
      commodo id pariatur. Aliquip cupidatat nulla eu sunt aliquip qui
      consectetur ut veniam.


      Voluptate enim pariatur tempor eu culpa enim consectetur mollit
      adipisicing dolor qui aliquip. Anim aute velit minim commodo nisi nisi
      laboris eiusmod in excepteur. Consectetur proident sit eu tempor amet
      tempor magna proident reprehenderit aliqua aute velit nisi. Non eu id quis
      mollit velit.
    invalid: true
    id: textarea-invalid-and-filled-out
  - $name: Invalid and disabled
    disabled: true
    invalid: true
    id: textarea-invalid-and-disabled
  - $name: Filled out and disabled
    value: >-
      Mollit deserunt nostrud veniam nisi et eu nisi do quis ad elit et sit ex.
      Aliquip nisi mollit pariatur ullamco consequat enim excepteur pariatur
      cupidatat aliqua aliqua cupidatat. Commodo laborum labore culpa fugiat
      nostrud est id Lorem cillum nostrud. Non duis reprehenderit qui commodo
      commodo nisi nostrud dolor est.


      Eiusmod dolor ea est exercitation dolor in veniam quis reprehenderit nisi
      irure veniam. Reprehenderit eu ut pariatur dolor est laborum non ex. Ut
      nulla aute ea qui. Minim proident ex incididunt ullamco ex nostrud et
      fugiat. Minim adipisicing est incididunt Lorem cillum ullamco incididunt
      veniam amet Lorem anim sunt consequat. Deserunt eu ipsum et ea id sunt
      eiusmod cillum aliqua. Mollit cupidatat labore exercitation id
      exercitation.
    disabled: true
    id: textarea-filled-out-and-disabled
  - $name: Filled out and disabled and invalid
    value: >-
      Ex eiusmod id do dolore sint. Veniam culpa qui dolor laboris ullamco anim
      pariatur quis dolore et exercitation esse nisi. Amet fugiat fugiat in enim
      aute ea ad occaecat do laboris veniam cillum proident. Velit reprehenderit
      irure ipsum veniam commodo sunt enim irure culpa duis quis aliqua
      proident.


      Laborum irure dolore mollit occaecat aliquip duis aliquip quis incididunt
      nulla reprehenderit sit fugiat. Dolore eu magna ullamco elit id ipsum
      aliqua anim amet. Deserunt reprehenderit cupidatat ipsum irure ipsum.
      Voluptate consequat do in aute amet ut reprehenderit ea mollit nulla non.
      Quis qui ullamco amet ullamco sit laborum laborum. Eiusmod sint fugiat
      dolor eu nulla ullamco. Est id cillum ipsum sunt non.
    disabled: true
    invalid: true
    id: textarea-filled-out-and-disabled-and-invalid
Template
// src/components/elements/form-element/textarea/textarea.twig

<textarea
	{{ attributes }}
	class="Input Input--textarea Textarea {{ classes|join(" ") }}"
	{% if id %} id="{{ id }}"{% endif %}
	{% if name %} name="{{ name }}"{% endif %}
	{% if disabled %} disabled{% endif %}
	{% if required %} required{% endif %}
	{% if invalid %} aria-invalid="true"{% endif %}
>{{ value }}</textarea>

Variants

default
Open
Invalid
Open
Filled out
Open
Disabled
Open
Invalid and filled-out
Open
Invalid and disabled
Open
Filled out and disabled
Open
Filled out and disabled and invalid
Open