# Handoff example — account settings email field

Use this example to understand the minimum information expected before a screen is marked ready for development.

## Purpose

Allow an authenticated user to replace the notification email associated with the account.

## Figma components and tokens

- `Forms / Field` containing `Forms / Input`.
- `Actions / Button` for Save.
- `Feedback / Alert` for server-level failure.
- `field/gap` → `component.field.gap` → `--component-field-gap`.
- `control/radius` → `component.control.radius` → `--component-control-radius`.
- `action/danger/background` → `component.action.danger.background` → `--component-action-danger-background`.

## States

- Empty: current email absent; Save disabled until a valid value exists.
- Filled: existing value visible and editable.
- Focus: visible focus indicator; label remains visible.
- Error: invalid syntax or already-used address; error message is associated with the input.
- Loading: Save preserves width, exposes busy state and prevents duplicate submission.
- Success: confirmation is announced and focus moves to the confirmation heading.

## Responsive rule

The field and button share a row when the container is at least 640 px. Below 640 px they stack, fill the container and preserve a minimum 44 px touch target.

## Acceptance criteria

1. Keyboard users can reach, edit and submit the field in logical order.
2. The error is communicated with text and not by color alone.
3. A failed request preserves the entered address and offers retry.
4. Long addresses wrap or truncate without covering the trailing action.
5. Light and dark implementations use semantic tokens rather than copied hex values.
6. The coded UI is checked at 320, 390, 768 and 1440 px and at 200% browser zoom.

