StreetAddress

A street-address (line1) input wired to React Hook Form. By default it’s a plain text input. Pass lookup to enable SmartyStreets autocomplete — selecting a suggestion atomically fills the sibling line2/city/state/zip fields on the parent address object, preserving any other keys (name, phone, etc.) already there.

Usage

Must be used inside a Form (or any react-hook-form provider). Drop it inside a Form.Field for label, description, and error wiring. When lookup is on, the field name must be a nested path (e.g. address.line1) so the component knows which parent object to fill.

<Form
  onSubmit={(data) => console.table(data)}
  defaultValues={{
    address: { line1: '', line2: '', city: '', state: '', zip: '' },
  }}
  className="w-full max-w-md"
>
  <Form.Field name="address.line1" label="Address">
    <Form.StreetAddress lookup />
  </Form.Field>
  <Form.Field name="address.line2" label="Apt, suite, etc.">
    <Form.Input placeholder="Optional" />
  </Form.Field>
  <Form.Field name="address.city" label="City">
    <Form.Input />
  </Form.Field>
  <Form.Field name="address.state" label="State">
    <Form.Input />
  </Form.Field>
  <Form.Field name="address.zip" label="ZIP">
    <Form.Input />
  </Form.Field>
  <Form.SubmitButton>Submit</Form.SubmitButton>
</Form>

Conditional lookup

SmartyStreets only covers US addresses. For forms that accept international addresses, watch a sibling country field with useWatch and pass lookup={country === 'US'}. When lookup is false, the component is a plain text input — no fetch, no popup — so the same component handles both cases without remounting.

The watching has to live in a component nested inside the Form provider, so the example below extracts a small Line1Field helper.

import { Form } from '@vesyl/ui-next'
import { useWatch } from 'react-hook-form'

function Line1Field() {
  const country = useWatch({ name: 'address.country' }) as string | undefined
  return <Form.StreetAddress lookup={country === 'US'} />
}

export default function StreetAddressInternational() {
  return (
    <Form
      onSubmit={(data) => console.table(data)}
      defaultValues={{
        address: { country: 'US', line1: '', line2: '', city: '', state: '', zip: '' },
      }}
      className="w-full max-w-md"
    >
      <Form.Field name="address.country" label="Country">
        <Form.CountrySelect />
      </Form.Field>
      <Form.Field name="address.line1" label="Address">
        <Line1Field />
      </Form.Field>
      <Form.Field name="address.line2" label="Apt, suite, etc.">
        <Form.Input placeholder="Optional" />
      </Form.Field>
      <Form.Field name="address.city" label="City">
        <Form.Input />
      </Form.Field>
      <Form.Field name="address.state" label="State or Province">
        <Form.Input />
      </Form.Field>
      <Form.Field name="address.zip" label="Postal Code">
        <Form.Input />
      </Form.Field>
      <Form.SubmitButton>Submit</Form.SubmitButton>
    </Form>
  )
}

Props

Name	Type	Description
`name`	`string`	Path to the line1 field (e.g. `'address.line1'`). Inherited from `Form.Field` context if omitted. Required to be a nested path when `lookup` is on.
`placeholder`	`string`	Placeholder text. Defaults to `'Start typing an address…'`.
`disabled`	`boolean`	Disable the input.
`lookup`	`boolean`	Enable SmartyStreets autocomplete and smart-fill. Defaults to `false` — opt in per-form (typically gated on a country field).
`noAutofill`	`boolean`	Block browser/password-manager autofill so saved-address fillers don’t clobber the SmartyStreets dropdown. Opt-in. Defaults to `false`.
`onSelect`	`(address: AddressSuggestion) => void`	Fires after a suggestion is applied to the form.

Notes

Lookups debounce at 300ms and require at least 3 characters.
The SmartyStreets embedded key is host-restricted; the component works out of the box on registered hostnames.
Default lookup={false} keeps the component dependency-free for the common case (non-US forms, internal admin forms, anywhere you don’t want to spend SmartyStreets API calls).