How to specify label to ui:outputText in lightning component, as label attribute is not supported in ui:outputText?

I have tried <h3 class="slds-text-heading--small">Label</h3>. But its showing label above the field and not in the same line.

3 Answers 3


Use your code inside <div> tag Try with <div class="slds-grid"> or <div style="display:inline-flex"/>


<div class="slds-grid"> 
<h3></h3> <UI:output text  value=" " />

You can simply add a label tag like this and associate it with same aura:id as the for attribute on label :

  <label class="slds-form-element__label" for="text-input-id-1" id="inline-text-label">My label</label>

  <ui:outputText  aura:id="text-input-id-1" class="field" value="{!item.JobType}"/>

Do not use ui:outputtext, create tour own outputtext component who will have html tags you need :)

Something like

   <aura:attribute name="label" type="String">
   <aura:attribute name="value" type="String">



Of course you can replace/complete all the HTML parts of my example by what you need ( add SLDS classes for example )

Then you call it like

<c:MyOutputText label="Ze Label" value="The value" />
  • 3
    Can you edit your answer to provide more detail, maybe cite documentation, or provide a working example? Feb 10, 2017 at 19:08
  • The component used in our project is too complicated to be shared. ( 10+ attributes, inheritance, etc .... ). I edited to post an obvious example, probably not needed to anyone who practised lightning for more than 10 mn. Feb 11, 2017 at 20:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.