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" rows="5"></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" rows="5"></textarea>
  </div>

Empty

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

          <div class="f-wrap ">
      
    <textarea class="f-base textarea" rows="5"></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" rows="5" 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" rows="5">prefilled value</textarea>
  </div>

More rows

Message

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

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

Schema

    {
  "props": {
    "label": {
      "type": "string",
      "description": "Label of the component"
    },
    "required": {
      "type": "boolean",
      "default": false,
      "description": "Required of the component"
    },
    "placeholder": {
      "type": "string",
      "description": "Placeholder of the component"
    },
    "value": {
      "type": "string",
      "description": "Value of the component"
    },
    "rows": {
      "type": "string",
      "default": "5",
      "description": "Rows of the component"
    }
  }
}