Etat Pur Design System

Textarea 

<div class="flex flex-col items-start gap-8 w-full max-w-md">

    <div class="flex flex-col w-full gap-y-1">
        <div class="input-wrapper flex flex-col relative w-full  floating-label">

            <textarea class="form-textarea form-input w-full peer min-h-24
                    
                    " name="textarea" id="textarea" placeholder=""></textarea>

            <div class="label-wrapper ">
                <label for="textarea" class="flex flex-row items-center gap-2">

                    <span class="flex-grow">label</span>

                </label>
            </div>
        </div>

    </div>
    <div class="flex flex-col w-full gap-y-1">
        <div class="input-wrapper flex flex-col relative w-full  floating-label">

            <textarea class="form-textarea form-input w-full peer min-h-24
                    required
                    " name="textarea-with-helper" id="textarea-with-helper" placeholder=""></textarea>

            <div class="label-wrapper ">
                <label for="textarea-with-helper" class="flex flex-row items-center gap-2">
                    <div class="left-svg">
                        <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg>
                    </div>

                    <span class="flex-grow">label</span>

                    <div class="required text-error">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
                        </svg>
                    </div>

                    <div class="right-svg">
                        <svg class="text-black shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg>
                    </div>
                </label>
            </div>
        </div>

        <div>
            <div class="flex flex-row items-center gap-x-1 text-body-xs text-black/40">
                <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg>
                Helper text
            </div>
        </div>
    </div>
</div>
 
<div class="flex flex-col items-start gap-8 w-full max-w-md">
    {% for input in inputs %}
        {% include "@template-textarea" with {
            id: input.id,
            name: input.name,
            type: input.type,
            label: input.label,
            label_icon_left: input.label_icon_left,
            label_icon_right_enabled: input.label_icon_right_enabled,
            label_floating: input.label_floating,
            required: input.required,
            disabled: input.disabled,
            value: input.value,
            state: input.state,
            color: input.color,
            withHelper: input.withHelper,
        } %}
    {% endfor %}
</div>
 
{
  "label_icon_right_question": {
    "name": "heroicons--question-mark-circle-outline"
  },
  "label_icon_right_error": {
    "name": "heroicons--exclamation-circle-outline"
  },
  "label_icon_right_validated": {
    "name": "heroicons--check-circle-outline"
  },
  "inputs": [
    {
      "id": "textarea",
      "name": "textarea",
      "type": "textarea",
      "label": "label",
      "label_floating": true,
      "required": false,
      "disabled": false
    },
    {
      "id": "textarea-with-helper",
      "name": "textarea-with-helper",
      "type": "textarea",
      "label": "label",
      "label_icon_left": {
        "name": "heroicons--user-outline"
      },
      "label_icon_right_enabled": true,
      "label_floating": true,
      "required": true,
      "disabled": false,
      "withHelper": true
    }
  ]
}

No notes defined.