Base Record Components
By the end of this lesson, you'll be able to:
- Use lightning-record-form for fast record display and editing
- Use lightning-record-view-form and lightning-record-edit-form for finer control
- Choose the right base component for a given requirement
Prerequisites: "Lightning Data Service and the UI API"
lightning-record-form: The Fastest Path
<lightning-record-form
record-id={recordId}
object-api-name="Account"
fields={fields}
mode="edit">
</lightning-record-form>A single component handling both display and edit modes, with minimal configuration — the fastest way to get a working record form on the page.
lightning-record-view-form and lightning-record-edit-form
<lightning-record-edit-form object-api-name="Contact" record-id={recordId}>
<lightning-input-field field-name="FirstName"></lightning-input-field>
<lightning-input-field field-name="LastName"></lightning-input-field>
<lightning-input-field field-name="Email"></lightning-input-field>
<lightning-button type="submit" label="Save"></lightning-button>
</lightning-record-edit-form>lightning-record-form is actually built from these two more granular components underneath. Reach for them directly when you need custom layout, field ordering, or additional markup between fields that lightning-record-form alone doesn't give you control over.
Choosing the Right Component
lightning-record-form— fastest to set up, good default for simple cases.lightning-record-view-form— read-only display with custom layout control.lightning-record-edit-form— editable, with full control over field arrangement and surrounding markup.
Why This Matters in Real Projects
These components handle field-level security, validation, and the actual save operation automatically — a substantial amount of what would otherwise be custom form-building code (Module 8 covers building fully custom forms from scratch, for the cases where these base components aren't flexible enough).
Exercise
Write a lightning-record-form that displays an Account record (read-only) showing its Name and Industry fields.
Show hint
Use mode="view" and the fields attribute.
Exercise
Challenge: a designer wants a custom two-column layout with specific fields in specific positions, something lightning-record-form can't provide alone. Which component should be used instead, and why?
Show hint
Think about which component gives layout control.
Base Record Components Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
Salesforce ships a set of pre-built, LDS-backed components that can eliminate an enormous amount of custom form-building code — knowing which one to reach for saves real development time.