Form

A grouped set of inputs used to collect information, registrations, enquiries, observations, or permissions.

When To Use

Use	Avoid
A grouped set of inputs used to collect information, registrations, enquiries, observations, or permissions.	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

Code

CSS Imports

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

Starter Markup

<form class="lds-form">
  <div class="lds-field">
    <label class="lds-label" for="event-name">Event name</label>
    <input class="lds-input" id="event-name" name="event-name" autocomplete="organization">
    <p class="lds-help-text">Use the public event title.</p>
  </div>
  <button class="lds-button" type="submit">Submit registration</button>
</form>

Class Reference

Class	Use
`.lds-form`	Groups form fields and actions into a consistent digital form layout.
`.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.
`.lds-button`	Applies the primary action button style.

Review Notes

Web

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

Print

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.