Red border around a <lightning:input>

Question

In Aura Lightning, I want to control when to show a red border on a

<lightning:input>

This way I can indicate to the user when there is invalid input.

This example shows what it would look like using regular HTML https://www.lightningdesignsystem.com/components/input/

Answer 1

I figured out a way to do it.

    <aura:renderIf isTrue="{!v.isError}">
        <div class="slds-form-element slds-has-error">
            <label class="slds-form-element__label" for="text-input-id-48">
                <abbr class="slds-required" title="required">* </abbr>Input Label</label>
            <div class="slds-form-element__control">
                <lightning:input label=" Use the format 1d 12h 30m - d=days, h=hours, m=minutes" type="text" value="{!v.userInputTime}" aura:id="userInputTime" onchange="{!c.onDurationChanged}" placeholder="1d 12h 30m"/>
            </div>
            <div class="slds-form-element__help" id="error-message-id-49">Enter a value.</div>
        </div>
        </aura:renderIf>
        <aura:renderIf isTrue="{!not(v.isError)}">
            <lightning:input label=" Use the format 1d 12h 30m - d=days, h=hours, m=minutes" type="text" value="{!v.userInputTime}" aura:id="userInputTime" onchange="{!c.onDurationChanged}" placeholder="1d 12h 30m"/>
        </aura:renderIf>