UHasselt Component Library

Input: With Icon 

<span class="atm-form-input  form-input-with-icon">
    <input type="text" name="input-icon" id="input-icon" placeholder="Enter username" class="form-input" value="">
    <span class="icon far fa-user   form-input-prepend-icon" aria-hidden="true"></span>
    <span class="icon far fa-times   form-input-error-icon" aria-hidden="true"></span>
    <span class="icon far fa-check   form-input-valid-icon" aria-hidden="true"></span>
</span>
 
<span class="atm-form-input {{modifier}} {{#if prependIcon}}form-input-with-icon{{/if}}">
    <input 
        type="{{type}}"
        name="{{name}}"
        id="{{id}}"
        placeholder="{{placeholder}}"
        class="form-input"
        value="{{value}}"
        {{#if disabled}}disabled{{/if}}
    >
    {{#if prependIcon}}
    {{ render '@icon' prependIcon  }}
    {{/if}}
    {{ render '@icon' errorIcon  }}
    {{ render '@icon' validIcon  }}
</span>
 
{
  "modifier": "",
  "type": "text",
  "disabled": false,
  "name": "input-icon",
  "id": "input-icon",
  "placeholder": "Enter username",
  "value": "",
  "errorIcon": {
    "icon": "fa-times",
    "style": "far",
    "modifier": "form-input-error-icon"
  },
  "validIcon": {
    "icon": "fa-check",
    "style": "far",
    "modifier": "form-input-valid-icon"
  },
  "prependIcon": {
    "icon": "fa-user",
    "style": "far",
    "modifier": "form-input-prepend-icon"
  }
}
  • Content: 
    .atm-form-input,
.form-input-wrapper {
    @apply relative;

    .form-input {
        @apply h-12 w-72;
        font-size: 16px !important;

        &:focus {
            @apply border-black;
        }

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

    .form-input-error-icon {
        @apply hidden;
    }

    .form-input-valid-icon {
        @apply hidden;
    }

    .form-input-prepend-icon {
        @apply absolute  inline left-3 text-black-400;
        top: calc(50% - 0.5em);
    }

    &.form-input-invalid {
        .form-input {
            @apply border-red text-red pr-10;

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

        .form-input-error-icon {
            @apply absolute inline right-3 text-red;
            top: calc(50% - 0.5em);
        }
    }

    &.form-input-valid {
        .form-input {
            @apply border-green text-green  pr-10;

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

        .form-input-valid-icon {
            @apply absolute inline right-3 text-green;

            top: calc(50% - 0.5em);
        }
    }

    &.form-input-with-icon {
        .form-input {
            @apply pl-10;
        }
    }
}
  • URL: /components/raw/input/input.css
  • Filesystem Path: src\components\02-atoms\forms\input\input.css
  • Size: 1.3 KB

No notes defined.