Components

Form

21 demos · registry/new-york-v4/ui/form.tsx

form-next-complex
Subscription Plan

Choose your subscription plan.

Choose how often you want to be billed.

Add-ons

Select additional features you'd like to include.

Advanced analytics and reporting

Automated daily backups

24/7 premium customer support

Receive email updates about your subscription

form-next-demo
Bug Report
Help us improve by reporting bugs you encounter.
0/100 characters

Include steps to reproduce, expected behavior, and what actually happened.

form-rhf-array
Contact Emails
Manage your contact email addresses.
Email Addresses

Add up to 5 email addresses where we can contact you.

form-rhf-checkbox
Notifications
Manage your notification preferences.
Responses

Get notified for requests that take time, like research or image generation.

Tasks

Get notified when tasks you've created have updates.

form-rhf-complex
You're almost there!
Choose your subscription plan and billing period.
Subscription Plan

Choose your subscription plan.

Choose how often you want to be billed.

Add-ons

Select additional features you'd like to include.

Advanced analytics and reporting

Automated daily backups

24/7 premium customer support

Receive email updates about your subscription

form-rhf-demo
Bug Report
Help us improve by reporting bugs you encounter.
0/100 characters

Include steps to reproduce, expected behavior, and what actually happened.

form-rhf-input
Profile Settings
Update your profile information below.

This is your public display name. Must be between 3 and 10 characters. Must only contain letters, numbers, and underscores.

form-rhf-password
Create Password
Choose a strong password to secure your account.
At least 8 characters
One lowercase letter
One uppercase letter
One number
One special character
form-rhf-radiogroup
Subscription Plan
See pricing and features for each plan.
Plan

You can upgrade or downgrade your plan at any time.

form-rhf-select
Language Preferences
Select your preferred spoken language.

For best results, select the language you speak.

form-rhf-switch
Security Settings
Manage your account security preferences.

Enable multi-factor authentication to secure your account.

form-rhf-textarea
Personalization
Customize your experience by telling us more about yourself.

Tell us more about yourself. This will be used to help us personalize your experience.

form-tanstack-array
Contact Emails
Manage your contact email addresses.
Email Addresses

Add up to 5 email addresses where we can contact you.

form-tanstack-checkbox
Notifications
Manage your notification preferences.
Responses

Get notified for requests that take time, like research or image generation.

Tasks

Get notified when tasks you've created have updates.

form-tanstack-complex
Subscription Plan

Choose your subscription plan.

Choose how often you want to be billed.

Add-ons

Select additional features you'd like to include.

Advanced analytics and reporting

Automated daily backups

24/7 premium customer support

Receive email updates about your subscription

form-tanstack-demo
Bug Report
Help us improve by reporting bugs you encounter.
0/100 characters

Include steps to reproduce, expected behavior, and what actually happened.

form-tanstack-input
Profile Settings
Update your profile information below.

This is your public display name. Must be between 3 and 10 characters. Must only contain letters, numbers, and underscores.

form-tanstack-radiogroup
Subscription Plan
See pricing and features for each plan.
Plan

You can upgrade or downgrade your plan at any time.

form-tanstack-select
Language Preferences
Select your preferred spoken language.

For best results, select the language you speak.

form-tanstack-switch
Security Settings
Manage your account security preferences.

Enable multi-factor authentication to secure your account.

form-tanstack-textarea
Personalization
Customize your experience by telling us more about yourself.

Tell us more about yourself. This will be used to help us personalize your experience.