What I need to achieve is something like the below image got from standard contact detail in LEX: enter image description here

I have searched through the slds document but didn't find much things related to those output fields. What I have tried is write something similar to input field:

            <div class="slds-form-element">
                <label class="slds-form-element__label">Message Name</label>
                <div class="slds-form-element__control">
                    <span class="uiOutputText">{!message_name}</span>

It looks not too bad... But the margin is not right, and the dividend line is not there. I think the dividend line is kind of achieved by ::after or ::before rather than a <hr/> tag. But I can't find where it is by looking at the developer tool. Can someone please help to point me out here?


Something like this: https://lightningdesignsystem.com/components/forms/#flavor-input-input-read-only

<div class="slds-form-element">
  <span class="slds-form-element__label">Input Label</span>
  <div class="slds-form-element__control slds-has-divider--bottom">
    <span class="slds-form-element__static">Read Only</span>

The read-only state is for form elements that can’t be modified. It is used for small, non-editable form fields that sit next to inputs and allows the size and height to align. It is not meant for large paragraphs of text.

Because the read-only field state has no <input>, don’t use a <label> to provide better accessibility for screen readers and keyboard navigators. Instead, use a <span> with the .form-element__label class. Instead of an <input>, use the .form-element__static class inside the .form-element__control wrapper.

  • Thank you for this. Not sure why I missed that in the form page... It seems to me it is the slds-has-divider--bottom that does the job. Thank you for pointing that out.
    – Lance Shi
    Nov 17 '16 at 1:35
  • @LanceShi - My pleasure
    – Eric
    Nov 17 '16 at 1:35

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.