UHasselt Component Library

Textarea 

<!-- Default -->
<textarea name="textarea" id="textarea" placeholder="placeholder" class="form-textarea "></textarea>


<!-- Input Disabled -->
<textarea name="input-disabled" id="disabled" placeholder="placeholder" class="form-textarea " disabled></textarea>


<!-- Input Invalid -->
<textarea name="input-invalid" id="invalid" placeholder="placeholder" class="form-textarea form-textarea-invalid">invalid text</textarea>


<!-- Input Valid -->
<textarea name="input-valid" id="valid" placeholder="placeholder" class="form-textarea form-textarea-valid">valid text</textarea>


<textarea    
    name="{{name}}"
    id="{{id}}"
    placeholder="{{placeholder}}"
    class="form-textarea {{modifier}}"   
    {{#if disabled}}disabled{{/if}}
    >{{value}}</textarea>
 
/* Default */
{
  "modifier": "",
  "disabled": false,
  "name": "textarea",
  "id": "textarea",
  "placeholder": "placeholder",
  "value": ""
}


/* Input Disabled */
{
  "modifier": "",
  "disabled": true,
  "name": "input-disabled",
  "id": "disabled",
  "placeholder": "placeholder",
  "value": ""
}


/* Input Invalid */
{
  "modifier": "form-textarea-invalid",
  "disabled": false,
  "name": "input-invalid",
  "id": "invalid",
  "placeholder": "placeholder",
  "value": "invalid text"
}


/* Input Valid */
{
  "modifier": "form-textarea-valid",
  "disabled": false,
  "name": "input-valid",
  "id": "valid",
  "placeholder": "placeholder",
  "value": "valid text"
}
  • Content: 
    .form-textarea {
    @apply h-36 w-72;

    &:focus {
        @apply border-black;
    }

    &[disabled] {
        @apply bg-black-100;
    }
}

.form-textarea-invalid {
    @apply border-red text-red;

    &:focus {
        @apply border-red;
    }
}

.form-textarea-valid {
    @apply border-green text-green;

    &:focus {
        @apply border-green;
    }
}
  • URL: /components/raw/textarea/textarea.css
  • Filesystem Path: src\components\02-atoms\forms\textarea\textarea.css
  • Size: 392 Bytes

No notes defined.