Add autocomplete attribute to client facing inputs

[trillium]

Is your proposal related to a problem?

Recently I was booking coffee chats with other devs, some of them had Cal.com links and some had Calendly links from my phone. The Calendly links had autocomplete that autofilled my name and email and the Cal.com ones didn't.

Can we add them?

Describe the solution you'd like

Specifically looking to get things like:

• Name field <input name="name"> to have autocomplete="name"
  • eg <input name="name" autocomplete="name" >
• Same for phone number and email
  • <input name="email" > -> <input name="email" autocomplete="email" >
  • <input name="phone" > -> <input name="email" autocomplete="phone" >

Here's an element code snippet and screenshots of Calendly and Cal.com's name field for an appointment:

Calendly

<input
  class="i167bxqy i1uya22c"
  type="text"
  maxlength="155"
  autocomplete="name"
  id="full_name_input"
  name="full_name"
  required=""
  autocorrect="off"
  aria-invalid="false"
  value=""
/>

Cal.com

<input
    id=":r12:"
    type="text"
    placeholder=""
    class="hover:border-emphasis dark:focus:border-emphasis border-default bg-default placeholder:text-muted text-emphasis focus:ring-brand-default focus:border-subtle mb-2 block h-9 rounded-md border px-3 py-2 text-sm leading-4 transition focus:outline-none focus:ring-2 w-full disabled:bg-subtle disabled:hover:border-subtle disabled:cursor-not-allowed"
    name="name"
    required=""
    value=""
/>

Describe alternatives you've considered

Haven't really considered alternatives.

Additional context

Just a quality of life improvement. I much prefer Cal.com as a booking tool and would like to see ease of use parity with other tools on the market.

Requirement/Document

None that I'm aware of.

---

House rules

• If this issue has a 🚨 needs approval label, don't start coding yet. Wait until a core member approves feature request by removing this label, then you can start coding.
  • For clarity: Non-core member issues automatically get the 🚨 needs approval label.
  • Your feature ideas are invaluable to us! However, they undergo review to ensure alignment with the product's direction.
  • Follow Best Practices lined out in our Contributor Docs

[Hello-Ship-Code]

Hello @trillium

Could you please provide more specific details about the issue, such as the exact area where you're encountering it? If possible, sharing screenshots or additional information would be helpful.

[trillium]

Sure, I'm specifically looking to get HTML tags like: autocomplete="phone" and autocomplete="email" added to the inputs that are of that type so that devices that have that info stored will autofill those fields.

[Hello-Ship-Code]

Sure! I'll work on this.

[trillium]

I think it's fairly straightforwad but I'm not familiar with the codebase.

My main way of finding stuff has been to search the Tailwind classes and piece together where each component is stored.

I believe the fields are of component type:

• TextField from the file packages/ui/components/form/inputs/TextField.tsx
• Which is made from a more generic input at packages/ui/components/form/inputs/Input.tsx

But I'm not sure where in the booking process that TextField gets passed props where the autocomplete prop would need to live (if I'm operating from correct assumptions).