Shadcn UI password input toggle in Next JS 14 (the PROPER way)

preview_player
Показать описание
🎓 Shadcn ui password input toggle component tutorial with react hook form and next js 14.

THE SHADCN UI COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW!

#shadcn #nextjs14 #reacthookform
  1. WebDevEducation
  2. shadcn ui
  3. next js 14
Рекомендации по теме
Shadcn UI password 0:08:13

Shadcn UI password input toggle in Next JS 14 (the PROPER way)

ShadCN UI Crash 0:38:21

ShadCN UI Crash Course with Next.js | Mode Toggle, Sheets, Badges & more

Next.js with shadcn/ui 0:42:37

Next.js with shadcn/ui || Architecture || Components || Themes

Shadcn UI - 0:15:55

Shadcn UI - Blocks + React JS | A Quick guide

Shadcn UI + 0:19:42

Shadcn UI + Next.js 14 is AMAZING | QUICK TUTORIAL | PART 1

Top 5 Shadcn 0:15:31

Top 5 Shadcn UI Components You Should Be Using in 2024

I Never Want 0:57:53

I Never Want To Create Forms Any Other Way

Next Auth V5 8:00:57

Next Auth V5 - Advanced Guide (2024)

Full Stack React 2:49:14

Full Stack React JS Project ( URL Shortener ) - with Tailwind CSS, Supabase, Shadcn UI Tutorial 🔥🔥...

Next.js 14 Theming 0:20:46

Next.js 14 Theming with Shadcn UI - Shadcn UI Tutorial

TanStack Form: Simple 0:08:16

TanStack Form: Simple Validation (with shadcn/ui & React)

CSS Only - 0:05:29

CSS Only - Input Field with Floating Text Animation | Floating label input css

React OTP Input 0:19:30

React OTP Input Field With Typescript & Tailwind CSS

Build a custom 0:16:17

Build a custom login page for your SaaS app with Next.js, Tailwind CSS, and Next Auth (App Dir)!

Fullstack Modern Admin 0:43:37

Fullstack Modern Admin Panel Tutorial in Next.js with OrcDev (Shadcn ui, Drizzle, Neon, tRPC)

Build a Pair 3:40:39

Build a Pair Programming Finder with Video & Screen Share (Next.js, Shadcn, Tailwind, Typescript...

I Never Want 2:03:20

I Never Want To Build Authentication Any Other Way

Form Validation With 0:05:34

Form Validation With Valibot Is FEASIBLE!

Npm ERR code 0:00:46

Npm ERR code ERESOLVE react | Npm install error in visual studio code [Fast]

Next.js App Router 0:11:31

Next.js App Router Authentication (Sessions, Cookies, JWTs)

[Quickstart] Setting up 1:02:54

[Quickstart] Setting up Auth with React, Tailwind, Convex, and shadcn (how to build a chat app)

Library Management System 0:11:03

Library Management System Built Using React, Shadcn/ui, Supabase And React Query

Collapsible Sidebar in 0:41:16

Collapsible Sidebar in Next.js

16. Code trang 0:51:43

16. Code trang Register với Next.js, Shadcn UI, React Hook Form, Zod

Комментарии
Автор

As a developer with a UI/UX background, I wanted to provide some feedback that this design may cause some unintended confusion for users. The similarity principle states that interface elements with similar styles will be assumed to have similar behaviors. In this case, since some icons are interactive toggles while others are decorative descriptions, it may not meet user expectations. Users may try clicking non-interactive icons expecting them to toggle functionality as well

ibnurasikh
Автор

Great explanation and it is great to know about how to extend the Shadcn components functionality

mohdali-yqgq
Автор

I believe one improvement that was overlooked is integrating the button within the input field.

neliodiassantos
Автор

It's amazing this password toggle is not part of the library.... already

codernerd
Автор

Hey, great video. May I ask the name of the VS Code theme you're using?

vinoopb