Lily Design System™

AddressInput

A single-line text input for capturing a postal address, with autocomplete="street-address" set so browsers, password managers, and platform autofill can populate it from the user's saved addresses.

The component is intentionally minimal: it provides only the input and the autocomplete hint. Postcode lookup, suggestion dropdowns, and structured multi-field forms (street / city / region / postcode) are the consumer's responsibility — AddressInput is the building block, not the full address-capture flow. For typeahead behaviour, wrap or compose with Autosuggest or Combobox. For per-field validation, use a structured set of inputs instead.

Example

Show demo markup 
<label class="label" for="demo-input">Label</label><input class="address-input" id="demo-input" aria-label="an input for searching or manually entering an address" />
Usage example 
<AddressInput label="Postal address" value="" autocomplete="street-address" />
Show Svelte source 
// In your Svelte component:
import AddressInput from "lily-design-system-svelte-headless/components/AddressInput/AddressInput.svelte";

<AddressInput label="Label" />

Usage

<AddressInput label="Postal address" value="" autocomplete="street-address" />

Props

PropTypeDefaultDescription
labelstring (required)—Accessible name set on aria-label
valuestring""Bindable address value
requiredbooleanfalseWhether the field is required
disabledbooleanfalseWhether the field is disabled
autocompletestring"street-address"HTML autocomplete token; useful values include street-address, address-line1, address-line2, postal-code
...restPropsHTML attributes—Spread onto the root <input> element

Keyboard Interactions

  • Native <input> keyboard behaviour applies (typing, selection, clipboard)
  • Tab moves focus into and out of the input

ARIA

  • aria-label (set from label) provides the accessible name when no visible <label> element wraps the input
  • aria-required="true" is implied when required is set
  • aria-invalid and aria-errormessage should be set by the consumer when validation fails

When to Use

  • Capturing a single-line postal address as part of a contact or delivery form
  • Building a postcode lookup widget where the consumer wires the lookup logic externally

When Not to Use

  • Use a structured set of inputs (street, city, region, postcode) when you need separate fields for validation or formatting
  • Use Combobox or Autosuggest when you want a typeahead dropdown of results

Headless

This headless component renders semantic HTML with appropriate ARIA wiring. The consumer provides all visual styling — no CSS, animations, or layout assumptions are baked in.

Styles

The component renders with .address-input as the root class. No default styles are included.

Related components

  • text-input — single-line text input without address-specific autocomplete
  • autosuggest — text input with proposed matching options
  • postal-code-input — postal/ZIP code input with format validation

References

Implementation Notes

  • Renders a single <input type="text"> with autocomplete="street-address" so browsers and password managers can populate it from saved addresses
  • The consumer is responsible for any postcode lookup, autocomplete dropdown, or fallback to a multi-field structured form
  • Supports two-way binding on the value prop
  • Accepts required and disabled HTML attributes
  • Spreads restProps onto the root <input> for consumer customization
  • All text content (label, placeholder, error messages) comes through props for internationalization

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: address-input
  • PascalCase: AddressInput
  • Description: an input for searching or manually entering an address
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <input>
  • CSS class: .address-input
  • Interactive: yes

ARIA

  • aria-label (set from label) provides the accessible name when no visible <label> element wraps the input
  • aria-required="true" is implied when required is set
  • aria-invalid and aria-errormessage should be set by the consumer when validation fails

Keyboard

  • Native <input> keyboard behaviour applies (typing, selection, clipboard)
  • Tab moves focus into and out of the input

Props

  • label: string (required) (default: —) — Accessible name set on aria-label
  • value: string (default: "") — Bindable address value
  • required: boolean (default: false) — Whether the field is required
  • disabled: boolean (default: false) — Whether the field is disabled
  • autocomplete: string (default: "street-address") — HTML autocomplete token; useful values include street-address, address-line1, address-line2, postal-code
  • ...restProps: HTML attributes (default: —) — Spread onto the root <input> element