# Full Address Form

**URL:** <https://community.glideapps.com/t/full-address-form/79419>\
**Category:** Community Resources\
**Tags:** ai, form\
**Created:** [January 22, 2025, 6:39pm UTC](https://community.glideapps.com/t/full-address-form/79419 "2025-01-22T18:39:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 22, 2025, 6:39pm UTC](https://community.glideapps.com/t/full-address-form/79419/1 "2025-01-22T18:39:40Z")

</div>

A sleek, user-friendly address form!

- Captures all essential details (Street, City, State, etc.).
- Beautifully styled and ready for Glide AI integration.
- Fully customizable labels, placeholders, and fields.

**Images**

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/c/9ca96c6a68225ff57f5b449b6bc914597b3bc26e.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/1/51f8630fd85c5340f6d8c1aa1291cf2f72b4d778.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/0/c0238c1569534feb24cded6b1951f1a710e642c2.jpeg)

**Tips for Fine-Tuning:**

- Missing labels or placeholders? Send this: “I don’t see labels. Fix them.”
- Inputs running during typing? Send this: “The input are running when typing. Fix this.”
- Background color issues? Send this: “Remove the bg color in each input.”

Perfect for seamless user experiences.

* * *

— PROMPT —

````html
VARIABLES:
{
  "fieldsDataObject": {
    "globalLabel": null,
    "streetLabel": null,
    "streetPlaceholder": null,
    "street": null,
    "appartmentLabel": null,
    "appartmentPlaceholder": null,
    "appartment": null,
    "cityLabel": null,
    "cityPlaceholder": null,
    "city": null,
    "stateLabel": null,
    "statePlaceholder": null,
    "stateValue": null,
    "zipLabel": null,
    "zipPlaceholder": null,
    "zip": null,
    "countryLabel": null,
    "countryPlaceholder": null,
    "country": null,
	"requiredLabel":null,
	"optionalLabel":null
  },
  "schema": [
    {"name": "globalLabel", "type": "string", "id": "globalLabel"},
    {"name": "street", "type": "string", "id": "street"},
    {"name": "appartment", "type": "string", "id": "appartment"},
    {"name": "city", "type": "string", "id": "city"},
    {"name": "stateValue", "type": "string", "id": "stateValue"},
    {"name": "zip", "type": "string", "id": "zip"},
    {"name": "country", "type": "string", "id": "country"},
    {"name": "streetLabel", "type": "string", "id": "streetLabel"},
    {"name": "appartmentLabel", "type": "string", "id": "appartmentLabel"},
    {"name": "cityLabel", "type": "string", "id": "cityLabel"},
    {"name": "stateLabel", "type": "string", "id": "stateLabel"},
    {"name": "zipLabel", "type": "string", "id": "zipLabel"},
    {"name": "countryLabel", "type": "string", "id": "countryLabel"},
    {"name": "streetPlaceholder", "type": "string", "id": "streetPlaceholder"},
    {"name": "appartmentPlaceholder", "type": "string", "id": "appartmentPlaceholder"},
    {"name": "cityPlaceholder", "type": "string", "id": "cityPlaceholder"},
    {"name": "statePlaceholder", "type": "string", "id": "statePlaceholder"},
    {"name": "zipPlaceholder", "type": "string", "id": "zipPlaceholder"},
    {"name": "countryPlaceholder", "type": "string", "id": "countryPlaceholder"},
    {"name": "requiredLabel", "type": "string", "id": "requiredLabel"},
	{"name": "optionalLabel", "type": "string", "id": "optionalLabel"}
  ]
}

CODE:
Use this code with no modifications. Use the given styling. The component should look exactly the same as what it look in the code below. Make sure variables are correctly mapped to the alpine.js code variables and glide data editor. Labels, values, placeholders, optionalLabel and requiredLabel should work without any problem. The save of each field must be .lazy 300ms.
Don't change styling, it is really important.
Sometimes, the component is not showing the labels and the placeholders... Make sure it works. Also, the AI sometimes add a bg color on fields. Don't do that.

Make sure the script module has finished running before execute the rendering of the html.

```html
<html style="height: auto !important; --color-accent: 208deg 89% 32%;" class="color-scheme-light"><head>
<!-- DO EXACTLY THAT CODE and add all the variables!!! -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" as="style">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap">
    <meta name="color-scheme" content="light dark">
    <style>
      html, body {
        font-family: 'Inter', sans-serif;
        background-color: transparent;
      }
    </style>
    <script type="module">
      import { init } from "https://components.glide.info/shell/v1.js";
	  // Don't forget to add the variables.
      document.addEventListener("DOMContentLoaded", () => {init({"fieldsDataObject":{"globalLabel":null,"streetLabel":null,"streetPlaceholder":null,"street":null,"appartmentLabel":null,"appartmentPlaceholder":null,"appartment":null,"cityLabel":null,"cityPlaceholder":null,"city":null,"stateLabel":null,"statePlaceholder":null,"stateValue":null,"zipLabel":null,"zipPlaceholder":null,"zip":null,"countryLabel":null,"countryPlaceholder":null,"country":null},"schema":[{"name":"globalLabel","type":"string","id":"globalLabel"},{"name":"street","type":"string","id":"street"},{"name":"appartment","type":"string","id":"appartment"},{"name":"city","type":"string","id":"city"},{"name":"stateValue","type":"string","id":"stateValue"},{"name":"zip","type":"string","id":"zip"},{"name":"country","type":"string","id":"country"},{"name":"streetLabel","type":"string","id":"streetLabel"},{"name":"appartmentLabel","type":"string","id":"appartmentLabel"},{"name":"cityLabel","type":"string","id":"cityLabel"},{"name":"stateLabel","type":"string","id":"stateLabel"},{"name":"zipLabel","type":"string","id":"zipLabel"},{"name":"countryLabel","type":"string","id":"countryLabel"},{"name":"streetPlaceholder","type":"string","id":"streetPlaceholder"},{"name":"appartmentPlaceholder","type":"string","id":"appartmentPlaceholder"},{"name":"cityPlaceholder","type":"string","id":"cityPlaceholder"},{"name":"statePlaceholder","type":"string","id":"statePlaceholder"},{"name":"zipPlaceholder","type":"string","id":"zipPlaceholder"},{"name":"countryPlaceholder","type":"string","id":"countryPlaceholder"}],"actions":[],"debug":false})});
    </script>
    <style>/*! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com*/*,:after,:before{border-color:hsl(var(--color-gray-200)/1);border-style:solid;border-width:0;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:hsl(var(--color-gray-400)/1);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.headline-lg,.headline-md,.headline-sm,.headline-xl,.headline-xs{font-weight:600}.headline-md{font-size:1.5rem;letter-spacing:-.025em;line-height:2rem;line-height:1.375}.body-base{font-size:1rem;line-height:1.5rem;line-height:1.5}@media (min-width:768px){.body-base{font-size:.875rem;line-height:1.25rem}}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.block{display:block}.flex{display:flex}.grid{display:grid}.w-full{width:100%}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.justify-between{justify-content:space-between}.gap-5{gap:1.25rem}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.25rem*var(--tw-space-y-reverse));margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:hsl(var(--color-gray-300)/var(--tw-border-opacity))}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-gray-500{--tw-text-opacity:1;color:hsl(var(--color-gray-500)/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:hsl(var(--color-gray-900)/var(--tw-text-opacity))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.\@container{container-type:inline-size}@layer colors{:root.color-scheme-auto{--color-gray-0:0deg 0% 100%;--color-gray-50:0deg 0% 98%;--color-gray-100:0deg 0% 96%;--color-gray-200:0deg 0% 94%;--color-gray-300:0deg 0% 88%;--color-gray-400:0deg 0% 68%;--color-gray-500:0deg 0% 56%;--color-gray-600:0deg 0% 44%;--color-gray-700:0deg 0% 31%;--color-gray-800:0deg 0% 20%;--color-gray-900:0deg 0% 5%;--color-gray-950:0deg 0% 0%;--color-background-DEFAULT:0deg 0% 100%;@media (prefers-color-scheme:dark){--color-gray-0:0deg 0% 4%;--color-gray-50:0deg 0% 9%;--color-gray-100:0deg 0% 12%;--color-gray-200:0deg 0% 15%;--color-gray-300:0deg 0% 20%;--color-gray-400:0deg 0% 31%;--color-gray-500:0deg 0% 44%;--color-gray-600:0deg 0% 57%;--color-gray-700:0deg 0% 72%;--color-gray-800:0deg 0% 90%;--color-gray-900:0deg 0% 100%;--color-gray-950:0deg 0% 100%;--color-background-DEFAULT:0deg 0% 9%}}:root.color-scheme-light{color-scheme:light;--color-gray-0:0deg 0% 100%;--color-gray-50:0deg 0% 98%;--color-gray-100:0deg 0% 96%;--color-gray-200:0deg 0% 94%;--color-gray-300:0deg 0% 88%;--color-gray-400:0deg 0% 68%;--color-gray-500:0deg 0% 56%;--color-gray-600:0deg 0% 44%;--color-gray-700:0deg 0% 31%;--color-gray-800:0deg 0% 20%;--color-gray-900:0deg 0% 5%;--color-gray-950:0deg 0% 0%;--color-background-DEFAULT:0deg 0% 100%}:root.color-scheme-dark{color-scheme:dark;--color-gray-0:0deg 0% 4%;--color-gray-50:0deg 0% 9%;--color-gray-100:0deg 0% 12%;--color-gray-200:0deg 0% 15%;--color-gray-300:0deg 0% 20%;--color-gray-400:0deg 0% 31%;--color-gray-500:0deg 0% 44%;--color-gray-600:0deg 0% 57%;--color-gray-700:0deg 0% 72%;--color-gray-800:0deg 0% 90%;--color-gray-900:0deg 0% 100%;--color-gray-950:0deg 0% 100%;--color-background-DEFAULT:0deg 0% 9%}}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-accent:focus{--tw-ring-opacity:1;--tw-ring-color:hsl(var(--color-accent)/var(--tw-ring-opacity))}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}}@media (min-width:768px){.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:1024px){.lg\:px-7{padding-left:1.75rem;padding-right:1.75rem}}@media (min-width:1280px){.xl\:px-8{padding-left:2rem;padding-right:2rem}}</style>
  </head>
  <body x-cloak x-data="state" class="" :class="{ 'cursor-pointer': hasBodyAction }" style="height: auto !important;" data-iframe-overflow="">
    <div x-show="themeLoaded" class="@container w-full body-base antialiased">
      <div :class="{ 'px-4 py-1 sm:px-5 md:px-6 lg:px-7 xl:px-8': mode === 'standalone' }" class="px-4 py-1 sm:px-5 md:px-6 lg:px-7 xl:px-8">
        <fieldset class="w-full space-y-6">
        <!-- Global label for the address form -->
        <legend class="headline-md text-gray-900 mb-4" x-text="globalLabel"></legend>
      
        <div class="space-y-5">
          <!-- Street address input -->
          <div>
            <label for="street" class="block text-sm font-semibold text-gray-900 mb-2 flex justify-between">
              <span x-text="streetLabel">Numéro et rue</span> <span class="text-xs font-normal text-gray-500" x-text="requiredLabel"></span>
            </label>
            <input type="text" id="street" x-model.lazy="street" class="w-full px-3 py-2.5 text-gray-900 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-accent" x-bind:placeholder="streetPlaceholder">
          </div>
      
          <!-- Apartment number input (optional) -->
          <div>
            <label for="appartment" class="block text-sm font-semibold text-gray-900 mb-2 flex justify-between">
              <span x-text="appartmentLabel"></span> <span class="text-xs font-normal text-gray-500" x-text="optionalLabel></span>
            </label>
            <input type="text" id="appartment" x-model.lazy="appartment" class="w-full px-3 py-2.5 text-gray-900 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-accent" x-bind:placeholder="appartmentPlaceholder">
          </div>
      
          <!-- City and State inputs -->
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
            <!-- City input -->
            <div>
              <label for="city" class="block text-sm font-semibold text-gray-900 mb-2 flex justify-between">
                <span x-text="cityLabel"></span> <span class="text-xs font-normal text-gray-500" x-text="requiredLabel"></span>
              </label>
              <input type="text" id="city" x-model.lazy="city" class="w-full px-3 py-2.5 text-gray-900 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-accent" x-bind:placeholder="cityPlaceholder">
            </div>
            <!-- State input -->
            <div>
              <label for="stateValue" class="block text-sm font-semibold text-gray-900 mb-2 flex justify-between">
                <span x-text="stateLabel"></span> <span class="text-xs font-normal text-gray-500" x-text="requiredLabel"></span>
              </label>
              <input type="text" id="stateValue" x-model.lazy="stateValue" class="w-full px-3 py-2.5 text-gray-900 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-accent" x-bind:placeholder="statePlaceholder">
            </div>
          </div>
      
          <!-- Postal Code and Country inputs -->
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
            <!-- Postal Code input -->
            <div>
              <label for="zip" class="block text-sm font-semibold text-gray-900 mb-2 flex justify-between">
                <span x-text="zipLabel"></span> <span class="text-xs font-normal text-gray-500" x-text="requiredLabel"></span>
              </label>
              <input type="text" id="zip" x-model.lazy="zip" class="w-full px-3 py-2.5 text-gray-900 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-accent" x-bind:placeholder="zipPlaceholder">
            </div>
            <!-- Country input -->
            <div>
              <label for="country" class="block text-sm font-semibold text-gray-900 mb-2 flex justify-between">
                <span x-text="countryLabel"></span> <span class="text-xs font-normal text-gray-500" x-text="requiredLabel"></span>
              </label>
              <input type="text" id="country" x-model.lazy="country" class="w-full px-3 py-2.5 text-gray-900 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-accent" x-bind:placeholder="countryPlaceholder">
            </div>
          </div>
        </div>
      </fieldset>
      </div>
    </div>
  
  <script src="//cdn.jsdelivr.net/npm/@iframe-resizer/child@5.2.1"></script>
<div style="clear: both; display: block; height: 0px;"></div></body></html>

````

##### Also available here:

> **[Glide Ai Library (redirect)](https://aicomponents.glide.page/dl/a400f7/s/9671c3/r/jls36zRjTLWKNeYQH4fPew)**

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [January 22, 2025, 10:23pm UTC](https://community.glideapps.com/t/full-address-form/79419/2 "2025-01-22T22:23:13Z")

</div>

This looks neat, but this could be achieved natively through text entry components in a container. That would be much easier. However, you could add additional functionality like auto-fill address from another database through AI-Component.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 22, 2025, 10:32pm UTC](https://community.glideapps.com/t/full-address-form/79419/3 "2025-01-22T22:32:35Z")

</div>

The goal of that ai component is to be ready to go

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 23, 2025, 2:57am UTC](https://community.glideapps.com/t/full-address-form/79419/4 "2025-01-23T02:57:16Z")

</div>

Well, and do the validation yourself. It certainly is friendly, but you have to know what you’re doing to use these stuff effectively.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [April 28, 2025, 7:45pm UTC](https://community.glideapps.com/t/full-address-form/79419/5 "2025-04-28T19:45:23Z")

</div>

> **[Address Form - Glide custom component](https://components.glide.info/share/commit::b7f44a22-0f29-8cdc-998f-e14a6abde8f8)**
>
> Custom component created in Glide

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [April 30, 2025, 10:15pm UTC](https://community.glideapps.com/t/full-address-form/79419/6 "2025-04-30T22:15:45Z")

</div>

> [@ThinhDinh](#):
>
> Well, and do the validation yourself.

Do you think validation could be prompted into the component?

([Topic here](https://community.glideapps.com/t/need-help-id-and-phone-number-input-not-triggering-visibility-logic-in-glide/81637) about field validation in a form.)

@MaximeBaker

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [May 1, 2025, 12:27am UTC](https://community.glideapps.com/t/full-address-form/79419/7 "2025-05-01T00:27:15Z")

</div>

Yes! You could also use location based format!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 1, 2025, 1:10am UTC](https://community.glideapps.com/t/full-address-form/79419/8 "2025-05-01T01:10:52Z")

</div>

Just to be clear, when I made the original comment, it was more about having to deal with the “Required” thing yourself.

When you put components inside a native form, Glide handles the “Required” entries for you.

When you have something custom, you have to do it yourself.