Skip to content

Conversation

@J-Michalek
Copy link
Contributor

πŸ”— Linked issue

Resolves #5564

❓ Type of change

  • πŸ“– Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

The telephone field is often used in registration forms - makes sense to support it.

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Nov 30, 2025

npm i https://pkg.pr.new/@nuxt/ui@5565

commit: 978cfa9

@septatrix
Copy link

Would it instead be possible to reuse InputTypeHTMLAttribute from @vue/runtime-dom? https://github.com/vuejs/core/blob/25ebe3a42cd80ac0256355c2740a0258cdd7419d/packages/runtime-dom/src/jsx.ts#L538

It might not make sense for all of them but I can certainly see using stuff like date when using the AuthForm for registration. I also heard stories of people uploading keyfiles for signing in...

@alex-eri
Copy link

alex-eri commented Dec 4, 2025

InputTypeHTMLAttribute

I think

type?: InputHTMLAttributes['type']
is better choice

@J-Michalek
Copy link
Contributor Author

@benjamincanac Is there a reason why the input types are selectively picked or can we allow any input type?

Copy link
Member

I think by default we only supported email and password but we can extend InputTypeHTMLAttributes yes!

@J-Michalek J-Michalek changed the title feat(AuthForm): add tel to input field type feat(AuthForm): allow all input types Dec 4, 2025

- `name?: string`{lang="ts-type"}
- `type?: 'text' | 'password' | 'email' | 'number' | 'checkbox' | 'select' | 'otp'`{lang="ts-type"}
- `type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'checkbox' | 'select' | 'otp'`{lang="ts-type"}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@benjamincanac How will we handle supporting all input types in the docs? Do we list all of them or add something like InputHTMLAttributes['type']?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess you can use | InputHTMLAttributes['type'] yes!

- `name?: string`{lang="ts-type"}
- `type?: 'text' | 'password' | 'email' | 'number' | 'checkbox' | 'select' | 'otp'`{lang="ts-type"}
- `name: string`{lang="ts-type"}
- `type: 'checkbox' | 'select' | 'otp' | 'InputHTMLAttributes['type']'`{lang="ts-type"}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed the question marks because both props are required and the description below also stated that the type must be included.

@J-Michalek
Copy link
Contributor Author

This should be ready.

Copy link
Member

@benjamincanac benjamincanac left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @J-Michalek! 😊

@benjamincanac benjamincanac merged commit 1f9009f into nuxt:v4 Dec 6, 2025
17 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

AuthForm fields types

4 participants