UHasselt Component Library

Label 

<!-- Default -->
<label class="form-label   " for="input-label">
    Input label
</label>


<!-- Invalid Label -->
<label class="form-label   form-label-invalid" for="input-label">
    Input label
</label>


<!-- Valid Label -->
<label class="form-label   form-label-valid" for="input-label">
    Input label
</label>


<!-- Inline Label -->
<label class="form-label  form-label-inline " for="input-label">
    Input label
</label>


<!-- Hidden Label -->
<label class="form-label form-label-hidden  " for="input-label">
    Input label
</label>


<label 
    class="form-label {{#if hideLabel}}form-label-hidden{{/if}} {{#if inlineLabel}}form-label-inline{{/if}} {{modifier}}" 
    for="{{for}}"
>
    {{text}}
</label>
 
/* Default */
{
  "for": "input-label",
  "text": "Input label",
  "modifier": "",
  "inlineLabel": false,
  "hideLabel": false
}


/* Invalid Label */
{
  "for": "input-label",
  "text": "Input label",
  "modifier": "form-label-invalid",
  "inlineLabel": false,
  "hideLabel": false
}


/* Valid Label */
{
  "for": "input-label",
  "text": "Input label",
  "modifier": "form-label-valid",
  "inlineLabel": false,
  "hideLabel": false
}


/* Inline Label */
{
  "for": "input-label",
  "text": "Input label",
  "modifier": "",
  "inlineLabel": true,
  "hideLabel": false
}


/* Hidden Label */
{
  "for": "input-label",
  "text": "Input label",
  "modifier": "",
  "inlineLabel": false,
  "hideLabel": true
}
  • Content: 
    .form-label {
    @apply text-black text-md block;

    &.form-label-invalid {
        @apply text-red;
    }

    &.form-label-valid {
        @apply text-green;
    }

    &.form-label-inline {
        @apply inline;
    }

    &.form-label-hidden {
        @apply hidden;
    }
}
  • URL: /components/raw/label/label.css
  • Filesystem Path: src\components\02-atoms\forms\label\label.css
  • Size: 302 Bytes

No notes defined.