AddressForm | KUIejs

AddressForm

Domain

Full address form with full name, phone, address lines, city, state/district, postal code, and country. Pre-fillable via the initial prop.

Preview

New Address

Full Name *

Phone

Address Line 1 *

Address Line 2 (optional)

City *

State / District

Postal Code

Country *

Country Code

Code

<%- include('modules/domain/common/address/AddressForm', {
  action: '/addresses/new'
}) %>

Preview

Edit Address

Full Name *

Phone

Address Line 1 *

Address Line 2 (optional)

City *

State / District

Postal Code

Country *

Country Code

Code

<%- include('modules/domain/common/address/AddressForm', {
  action: '/addresses/1/edit',
  initial: existingAddress,
  submitLabel: 'Update',
  cancelHref: '/addresses'
}) %>

<%
  var _action      = locals.action      || '#';
  var _method      = locals.method      || 'post';
  var _initial     = locals.initial     || {};
  var _submitLabel = locals.submitLabel || 'Save';
  var _cancelHref  = locals.cancelHref  || null;
  var _errors      = locals.errors      || {};
  var _formId      = locals.formId      || ('addr-form-' + Math.random().toString(36).substr(2, 9));
%>


  
    <%- include('../../../ui/Input', {
      id: 'addr-fullname', label: 'Full Name', name: 'fullName', required: true,
      iconLeft: '',
      value: _initial.fullName || '', error: _errors.fullName
    }) %>
    <%- include('../../../ui/Input', {
      id: 'addr-phone', label: 'Phone', name: 'phone', type: 'tel',
      iconLeft: '',
      value: _initial.phone || ''
    }) %>
  

  <%- include('../../../ui/Input', {
    id: 'addr-line1', label: 'Address Line 1', name: 'addressLine1', required: true,
    iconLeft: '',
    value: _initial.addressLine1 || '', error: _errors.addressLine1
  }) %>

  <%- include('../../../ui/Input', {
    id: 'addr-line2', label: 'Address Line 2 (optional)', name: 'addressLine2',
    value: _initial.addressLine2 || ''
  }) %>

  
    <%- include('../../../ui/Input', {
      id: 'addr-city', label: 'City', name: 'city', required: true,
      value: _initial.city || '', error: _errors.city
    }) %>
    <%- include('../../../ui/Input', {
      id: 'addr-state', label: 'State / District', name: 'state',
      value: _initial.state || ''
    }) %>
    <%- include('../../../ui/Input', {
      id: 'addr-postal', label: 'Postal Code', name: 'postalCode',
      value: _initial.postalCode || ''
    }) %>
  

  
    <%- include('../../../ui/Input', {
      id: 'addr-country', label: 'Country', name: 'country', required: true,
      iconLeft: '',
      value: _initial.country || '', error: _errors.country
    }) %>
    <%- include('../../../ui/Input', {
      id: 'addr-code', label: 'Country Code (2 letters)', name: 'countryCode',
      value: _initial.countryCode || '', maxLength: 2
    }) %>
  

  
    <% if (_cancelHref) { %>
    <%- include('../../../ui/Button', { variant: 'outline', children: 'Cancel', href: _cancelHref }) %>
    <% } %>
    <%- include('../../../ui/Button', { type: 'submit', children: _submitLabel }) %>