---
category: Actions
---

A `--control-h` input on `--surface` with a `--hairline-strong` border at
`--r-control`, placeholder in `--ink-mute`. Focus is the pack's one focus contract.
Invalid moves the border to `--danger` **and** shows the message — never the colour
alone.

The hero's joined pair wraps a `Field` and a `Button` in `td-join`: one 8px outer
radius, square seam edges — the measured shape of the reference's URL capture.

```tsx
<div className="td-join">
  <Field placeholder="website.com" />
  <Button>Add my website</Button>
</div>
```