Text Field
A single-line input for names, emails, short answers, IDs, quantities, or contact details.
When To Use
| Use | Avoid |
|---|---|
| A single-line input for names, emails, short answers, IDs, quantities, or contact details. | Avoid using this component when the content has a different job or needs a simpler plain-text treatment. |
| Use real form controls with visible labels, help text, validation, input purpose, keyboard access, and clear submit behaviour. | Avoid changing approved colours, typography, logo artwork, or class names to create a local style guide. |
| Use the starter markup as a copy/paste baseline for websites, Ghost HTML blocks, generated pages, or print previews. | Avoid copying placeholder IDs, links, contact details, or image paths without replacing them. |
Example
Use the name the person wants shown on attendance records.
Code
CSS Imports
@import "@landcare-design-system/css/dist/landcare.css";
@import "@landcare-design-system/css/dist/components.css";Starter Markup
<div class="lds-field">
<label class="lds-label" for="member-name">Full name</label>
<input class="lds-input" id="member-name" name="member-name" autocomplete="name">
<p class="lds-help-text">Use the name the person wants shown on attendance records.</p>
</div>Class Reference
| Class | Use |
|---|---|
.lds-field | Stacks a label, control, and help or validation text. |
.lds-label | Applies the approved label typography and weight. |
.lds-input | Styles text, email, search, number, date, and range inputs. |
.lds-help-text | Applies caption-sized supporting text. |
Review Notes
Web
Use real form controls with visible labels, help text, validation, input purpose, keyboard access, and clear submit behaviour.
Do not send online controls straight to paper. Use a separate reviewed print pattern when the final material is filled out by hand.
States And Variants
Document required, optional, error, success, disabled, focus, and read-only states.
Checklist
- Brand colours, typography, and logo use are inherited from the approved master brand.
- The first-read message or action is clear.
- Labels, headings, links, and alternative text are meaningful.
- Keyboard focus, colour contrast, and reading order are covered where the component is interactive.
- The component survives its final output: mobile, desktop, Ghost CMS, A4 print, poster, signage, or email.