Textarea

Default type text

Message

        {% include "@Components/forms/textarea/textarea.twig" with { props: {
  label: "Message"
} } %}

          <div class="f-wrap">
            <label class="f-label">
  <span class="f-label__title">Message</span>
</label>
    
    <textarea class="f-base textarea"></textarea>
  </div>

Required

Required

        {% include "@Components/forms/textarea/textarea.twig" with { props: {
  label: "Required",
  required: true
} } %}

          <div class="f-wrap">
            <label class="f-label   --required">
  <span class="f-label__title">Required</span>
</label>
    
    <textarea class="f-base textarea"></textarea>
  </div>

Empty

        {% include "@Components/forms/textarea/textarea.twig" with { props: {
} } %}

          <div class="f-wrap">
      
    <textarea class="f-base textarea"></textarea>
  </div>

Placeholder

With Placeholder

        {% include "@Components/forms/textarea/textarea.twig" with { props: {
  label: "With Placeholder",
  placeholder: "Enter your message"
} } %}

          <div class="f-wrap">
            <label class="f-label">
  <span class="f-label__title">With Placeholder</span>
</label>
    
    <textarea class="f-base textarea" placeholder="Enter your message"></textarea>
  </div>

Prefilled

With value prefilled value

        {% include "@Components/forms/textarea/textarea.twig" with { props: {
  label: "With value",
  value: "prefilled value"
} } %}

          <div class="f-wrap">
            <label class="f-label">
  <span class="f-label__title">With value</span>
</label>
    
    <textarea class="f-base textarea">prefilled value</textarea>
  </div>

Schema