This component uses the same base styling as form/form-element/input
.
src/components/fsk/form/form-element/input/textarea
// src/components/fsk/form/form-element/input/textarea/schema.yaml
$schema: http://json-schema.org/draft-07/schema#
$id: /fsk/form/form-element/input/textarea
additionalProperties: false
properties:
attributes:
type: object
value:
type: string
wrapper_attributes:
type: object
// src/components/fsk/form/form-element/input/textarea/mocks.yaml
attributes:
$drupal: true
id: textarea-default
$variants:
- $name: Invalid
attributes:
class:
- error
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.
attributes:
id: textarea-filled-out
- $name: Disabled
attributes:
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.
attributes:
class:
- error
id: textarea-invalid-and-filled-out
- $name: Invalid and disabled
attributes:
disabled: true
class:
- error
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.
attributes:
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.
attributes:
disabled: true
class:
- error
id: textarea-filled-out-and-disabled-and-invalid
// src/components/fsk/form/form-element/input/textarea/textarea.html.twig
<div{{ wrapper_attributes }}>
<textarea
{{ attributes ? attributes|without("class", "disabled", "required") : "" }}
class="FskInput FskInput--textarea {{ classes|join(" ") }}"
{% if attributes.disabled %} disabled{% endif %}
{% if attributes.required %} required{% endif %}
{% if "error" in attributes.class %} aria-invalid="true"{% endif %}
>{{ value }}</textarea>
</div>
Filled out mock data
attributes:
$drupal: true
id: textarea-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.
Invalid and filled-out mock data
attributes:
$drupal: true
id: textarea-invalid-and-filled-out
class:
- error
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 and disabled mock data
attributes:
$drupal: true
id: textarea-invalid-and-disabled
disabled: true
class:
- error
Filled out and disabled mock data
attributes:
$drupal: true
id: textarea-filled-out-and-disabled
disabled: true
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.
Filled out and disabled and invalid mock data
attributes:
$drupal: true
id: textarea-filled-out-and-disabled-and-invalid
disabled: true
class:
- error
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.