Address Fields

Category: Form Inputs
Status: beta— new this release, what that means →
Platforms: ReactAvailable
AngularNot implemented yet · data display wave· package preview
SwiftUIComposition
Jetpack ComposeComposition
FlutterComposition
Verification details
What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.
React
Package maturity: stable · Implementation verification: Beta
Buildverified
Interactionverified
Accessibilityverified
RTLverified
Large textverified
Visualno evidence
Publishedverified
This platform’s whole catalogue is verified to React beta. The catalogue figure is the weakest component on that platform, not an average.
Install: ReactReact Setup →
npx @kinetixui/cli add address-fieldsnpm i @kinetixui/ui @kinetixui/tokens@kinetixui/ui on npm @kinetixui/tokens on npm
The CLI copies React source. Usage imports from @kinetixui/ui require the npm package; for copied source, use your configured local import instead.
Angular · previewAngular Setup →
Not implemented yet · data display wave.
SwiftUISwiftUI Setup →
Composition · KinetixUI ships no SwiftUI component for this.
Jetpack ComposeJetpack Compose Setup →
Composition · KinetixUI ships no Jetpack Compose component for this.
FlutterFlutter Setup →
Composition · KinetixUI ships no Flutter component for this.
Registry: /r/address-fields.json
A11y: React: audited in CI →

The fields of a postal address in the order, wording and requiredness the app decides, inside a named fieldset, with the right autofill token on each.

Reduced motion: off · your browser setting

Shipping address

Building number

Street

District

City

Postal code

Additional number (optional)

The 4 digits on your national address

React installation#

npx @kinetixui/cli add address-fields

React usage#

import { AddressFields } from "@kinetixui/ui";
 
<AddressFields
  legend="Delivery address"
  section="shipping"
  fields={[
    { name: "building", label: "Building number", required: true, width: "half", inputMode: "numeric" },
    { name: "street", label: "Street", required: true, width: "half" },
    { name: "district", label: "District", required: true },
    { name: "locality", label: "City", required: true, width: "half" },
    { name: "postalCode", label: "Postal code", required: true, width: "half", inputMode: "numeric" },
    { name: "additional", label: "Additional number" },
  ]}
  value={address}
  onValueChange={setAddress}
  errors={errors}
/>

This is the roadmap's AddressForm, delivered as fields rather than a <form>: it goes inside your checkout, profile or booking form. There is no universal address, so it owns no address model and no postal database. You pass the fields in the order, wording and requiredness each country needs; the example above is a Saudi national address.

Each known field name gets its HTML autocomplete token, prefixed by section ("shipping address-line1") so a browser can fill a shipping and a billing address on one page. Any field can override it.
render swaps the default Input for your own control, such as a CountrySelect.
Optional fields show optionalLabel ("(optional)") beside the label instead of marking required ones with a bare asterisk.

Accessibility and RTL#

A <fieldset> named by its <legend>. Every field has a visible label; descriptions and errors are linked with aria-describedby, and an error marks its field invalid.
Two columns from the sm breakpoint, one below, all logical, so it mirrors under RTL and reflows at 200% text.
Checked in jsdom and Chromium; no screen reader run.

React API

The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.

This table is React-specific. The SwiftUI, Jetpack Compose, Flutter and Angular implementations share the design contract — the same variants, sizes, states and tokens — but each exposes its own idiomatic interface. Their real usage is in the platform tabs on the example above, not here.

AddressFields

AddressFields props
Prop	Type	Notes
legendrequired	React.ReactNodeThe fieldset's legend — "Shipping address".	The fieldset's legend — "Shipping address".
fieldsrequired	AddressFieldConfig[]
valuerequired	Record<string, string>
onValueChangerequired	(value: Record<string, string>) => void
errors	Record<string, React.ReactNode>Error message per field name. A field with a message is marked invalid.	Error message per field name. A field with a message is marked invalid.
section	"shipping" \| "billing"Which address this is, for autofill: prefixes every token ("shipping address-line1").	Which address this is, for autofill: prefixes every token ("shipping address-line1").
optionalLabel	stringShown beside the label of a field that is not required. Default "(optional)". Pass "" to hide.	Shown beside the label of a field that is not required. Default "(optional)". Pass "" to hide.

FoundationsSpinner Form InputsCalendar

Address Fields

Category

Form Inputs

Status

beta— new this release, what that means →

Platforms

ReactAvailable
AngularNot implemented yet · data display wave· package preview
SwiftUIComposition
Jetpack ComposeComposition
FlutterComposition

Verification details

What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.

React

Package maturity: stable · Implementation verification: Beta

Buildverified
Interactionverified
Accessibilityverified
RTLverified
Large textverified
Visualno evidence
Publishedverified

This platform’s whole catalogue is verified to React beta. The catalogue figure is the weakest component on that platform, not an average.

Install

ReactReact Setup →
npx @kinetixui/cli add address-fieldsnpm i @kinetixui/ui @kinetixui/tokens@kinetixui/ui on npm @kinetixui/tokens on npm
The CLI copies React source. Usage imports from @kinetixui/ui require the npm package; for copied source, use your configured local import instead.
Angular · previewAngular Setup →
Not implemented yet · data display wave.
SwiftUISwiftUI Setup →
Composition · KinetixUI ships no SwiftUI component for this.
Jetpack ComposeJetpack Compose Setup →
Composition · KinetixUI ships no Jetpack Compose component for this.
FlutterFlutter Setup →
Composition · KinetixUI ships no Flutter component for this.

Registry

/r/address-fields.json

A11y

React: audited in CI →

The fields of a postal address in the order, wording and requiredness the app decides, inside a named fieldset, with the right autofill token on each.

Reduced motion: off · your browser setting

Shipping address

Building number

Street

District

City

Postal code

Additional number (optional)

The 4 digits on your national address

React usage#

import { AddressFields } from "@kinetixui/ui";
 
<AddressFields
  legend="Delivery address"
  section="shipping"
  fields={[
    { name: "building", label: "Building number", required: true, width: "half", inputMode: "numeric" },
    { name: "street", label: "Street", required: true, width: "half" },
    { name: "district", label: "District", required: true },
    { name: "locality", label: "City", required: true, width: "half" },
    { name: "postalCode", label: "Postal code", required: true, width: "half", inputMode: "numeric" },
    { name: "additional", label: "Additional number" },
  ]}
  value={address}
  onValueChange={setAddress}
  errors={errors}
/>

Each known field name gets its HTML autocomplete token, prefixed by section ("shipping address-line1") so a browser can fill a shipping and a billing address on one page. Any field can override it.

render swaps the default Input for your own control, such as a CountrySelect.

Optional fields show optionalLabel ("(optional)") beside the label instead of marking required ones with a bare asterisk.

Accessibility and RTL#

A <fieldset> named by its <legend>. Every field has a visible label; descriptions and errors are linked with aria-describedby, and an error marks its field invalid.

Two columns from the sm breakpoint, one below, all logical, so it mirrors under RTL and reflows at 200% text.

Checked in jsdom and Chromium; no screen reader run.

React API

The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.

AddressFields

AddressFields props
Prop	Type	Notes
legendrequired	React.ReactNodeThe fieldset's legend — "Shipping address".	The fieldset's legend — "Shipping address".
fieldsrequired	AddressFieldConfig[]
valuerequired	Record<string, string>
onValueChangerequired	(value: Record<string, string>) => void
errors	Record<string, React.ReactNode>Error message per field name. A field with a message is marked invalid.	Error message per field name. A field with a message is marked invalid.
section	"shipping" \| "billing"Which address this is, for autofill: prefixes every token ("shipping address-line1").	Which address this is, for autofill: prefixes every token ("shipping address-line1").
optionalLabel	stringShown beside the label of a field that is not required. Default "(optional)". Pass "" to hide.	Shown beside the label of a field that is not required. Default "(optional)". Pass "" to hide.