Core Input Components: lightning-input, combobox, textarea
By the end of this lesson, you'll be able to:
- Use lightning-input for a range of field types with built-in SLDS styling
- Use lightning-combobox for dropdown/picklist-style selection
- Use lightning-textarea for multi-line text input
Prerequisites: Module 7: "Project: Advanced Account Search Backed by Apex"
lightning-input: The Workhorse
<lightning-input
label="Email Address"
type="email"
value={email}
onchange={handleEmailChange}>
</lightning-input>lightning-input's type attribute (text, email, number, checkbox, date, and more) covers most single-value fields. As with any LWC property, this is one-way data flow (Module 3) — value sets the displayed value, and onchange is how the component learns about user edits; it is not truly two-way bound.
lightning-combobox
get industryOptions() {
return [
{ label: 'Technology', value: 'Technology' },
{ label: 'Finance', value: 'Finance' },
{ label: 'Healthcare', value: 'Healthcare' },
];
}<lightning-combobox
label="Industry"
value={selectedIndustry}
options={industryOptions}
onchange={handleIndustryChange}>
</lightning-combobox>A dropdown-style selector. Each option is an object with a label (shown to the user) and a value (what's actually stored) — this {label, value} shape recurs across several base components.
lightning-textarea
<lightning-textarea
label="Notes"
value={notes}
onchange={handleNotesChange}>
</lightning-textarea>For multi-line text — the same value/onchange pattern as lightning-input, just rendered as a resizable text area.
Why This Matters in Real Projects
These base components handle SLDS styling, focus states, and accessibility (proper label/aria wiring) automatically — building the equivalent by hand with plain <input> elements would mean re-implementing all of that yourself.
Exercise
Write a lightning-input for a "Phone Number" field of the appropriate type, bound to a phone property with an onchange handler named handlePhoneChange.
Show hint
Check what type value is appropriate for phone numbers.
Exercise
Challenge: explain, as a comment, why lightning-input's value/onchange pattern is described as "one-way," not two-way binding.
Show hint
Recall Module 3's data binding lesson.
Core Input Components: lightning-input, combobox, textarea 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's base input components handle SLDS styling and accessibility automatically — knowing the core three well covers the large majority of real form-building needs.