Text Field

A single-line input for names, emails, short answers, IDs, quantities, or contact details. This is a digital component: Interface parts for websites, apps, online forms, documentation sites, and Opries-style repositories.

Purpose

The Text Field component gives Landcare groups a repeatable way to solve this communication problem without rebuilding the layout from scratch. It should inherit approved colour, typography, spacing, grid, accessibility, and logo guidance from the design system.

When To Use

Use	Avoid
Use when the content or interaction matches the component purpose and benefits from a familiar pattern.	Avoid inventing a one-off layout when this component already solves the job.
Use the component with clear hierarchy, generous spacing, and one obvious first-read message or action.	Avoid adding extra borders, colours, icons, or type styles just to make the component feel more designed.
Use approved Landcare tokens so group forks can inherit brand updates cleanly.	Avoid local colour, typography, or logo changes that break brand consistency.

Web Guidance

Use real form controls with visible labels, help text, validation, input purpose, keyboard access, and clear submit behaviour.

Structure: use semantic HTML, predictable reading order, and responsive sizing.
Accessibility: support keyboard access, visible focus, meaningful labels, sufficient contrast, and colour-independent meaning.
Layout: align the component to the page grid where it is a major element; use local spacing inside the component.
State: document default, hover, focus, active, disabled, loading, error, and success states where relevant.

Digital Example

Full name

Use the name the person wants shown on attendance records.

CSS Implementation

Import the selected brand token file first, then import the shared component layer. Use the component classes below in website or application code.

@import "@landcare-design-system/css/dist/landcare.css";
@import "@landcare-design-system/css/dist/components.css";

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.

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>

Print Guidance

Do not send online controls straight to paper. Use the Paper Forms And Fields components when the final artefact is filled out by hand.

Format: size the component for the final artefact, viewing distance, paper stock, and reproduction method.
Legibility: use Open Sans, strong contrast, and line lengths that suit the medium.
Production: preserve margins, trim safety, logo clear space, and enough room for handwriting where required.
Translation: when the web component becomes print, replace interaction states with clear instructions, labels, QR codes, or contact details.

States And Variants

Document required, optional, error, success, disabled, focus, and read-only states.

Variant	Use
Default	The standard form used across normal web and print contexts.
Emphasis	A higher-weight version for primary messages, urgent information, or first-read actions.
Compact	A denser version for tables, sidebars, forms, footers, and constrained print areas.
Example	A filled version for documentation, templates, learning resources, and production references.

Anatomy

Part	Guidance
Container	Use only when grouping helps. Prefer quiet rules and spacing over heavy boxes.
Title or label	Make the component purpose clear in plain language.
Body content	Keep copy short, scannable, and aligned to the typography hierarchy.
Action or outcome	Make the next step visible, especially in forms, posters, signs, and templates.

Review Checklist

Brand: approved colour, typography, logo clear space, and tone.
Hierarchy: one clear first read, then supporting information.
Grid: major edges align to the page, print, or component grid.
Accessibility: contrast, labels, focus, reading order, and colour-independent meaning are covered.
Output: the component survives the final medium: mobile, desktop, A4, poster, signage, social, or presentation.