Where's the slds for output form?

201    Asked by ClareMatthews in Salesforce , Asked on Mar 6, 2023

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

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:


            

                
                

                    {!message_name}
                

            

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


tag. But I can't find where it is by looking at the developer tool. Can someone please help to point me out here?

Answered by Ella Clarkson

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



  Input Label

 

    Read Only

 


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 , don’t use a to provide better accessibility for screen readers and keyboard navigators. Instead, use a with the .form-element__label class. Instead of an , use the .form-element__static class inside the .form-element__control wrapper.



Your Answer

Interviews

Parent Categories