Patterns

Patterns combine components with validation, error handling, and domain-specific logic to solve recurring interface problems.

Unlike components (which are presentational only), patterns are opinionated - they encode decisions about how inputs should be validated and how errors should be handled.

Documentation is being added progressively - see Storybook for interactive examples.

When to Use Patterns

• You need validation - Domain-specific rules like date ranges or currency formats
• You need consistent behaviour - Same validation and error handling across products
• You're solving a common problem - Reusable solution to a recurring user need

Usage

import {
  CurrencyInput,
  DateInputValidated,
} from '@shelter-england/design-system';

function DonationForm() {
  return (
    <form>
      <CurrencyInput
        label="Donation amount"
        name="amount"
        onChange={handleAmountChange}
      />

      <DateInputValidated
        label="Date of birth"
        name="dob"
        onChange={handleDateChange}
      />
    </form>
  );
}