Field Group

A labelled group of related form controls, help text, and validation messages.

When To Use

Use	Avoid
A labelled group of related form controls, help text, and validation messages.	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

Volunteer details

Code

CSS Imports

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

Starter Markup

<fieldset class="lds-field-group">
  <legend>Volunteer details</legend>
  <div class="lds-field">
    <label class="lds-label" for="volunteer-email">Email</label>
    <input class="lds-input" id="volunteer-email" type="email" autocomplete="email">
  </div>
</fieldset>

Class Reference

Class	Use
`.lds-field-group`	Groups related controls inside an accessible fieldset.
`.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.

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.