Select

A compact control for choosing one option from a controlled list.

When To Use

Use	Avoid
A compact control for choosing one option from a controlled list.	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

Region

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="region">Region</label>
  <select class="lds-select" id="region" name="region">
    <option>Select a region</option>
    <option>Northern tablelands</option>
    <option>Coast and estuary</option>
  </select>
</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-select`	Styles select menus with Landcare spacing and type.

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.