feat(input): add show/hide password toggle

[tuminzee]

This PR adds state to handle visibility toggle for input with type password

Fixes https://github.com/shadcn/ui/issues/265

[vercel[bot]]

@tuminzee is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[jocarrd]

Nice :heart:

[tuminzee]

Nice :heart:

Right now the implementation is only present in the examples account form, but can be added to the ci so it could be available to users who add Input using cli let me know what you think about it

[jocarrd]

Nice heart

Right now the implementation is only present in the examples account form, but can be added to the ci so it could be available to users who add Input using cli let me know what you think about it

I believe that those who use the CLI should also enjoy this improvement.It makes sense to add it, as many users utilize the library using the CLI (including myself)

[tuminzee]

perfect. I’ll update the PR On Wed, 31 May 2023 at 15:12, Jorge Carrera @.***> wrote:

Nice heart

Right now the implementation is only present in the examples account form, but can be added to the ci so it could be available to users who add Input using cli let me know what you think about it

I believe that those who use the CLI should also enjoy this improvement.It makes sense to add it, as many users utilize the library using the CLI (including myself)

— Reply to this email directly, view it on GitHub https://github.com/shadcn/ui/pull/504#issuecomment-1569851533, or unsubscribe https://github.com/notifications/unsubscribe-auth/AN34JQ5LCA2EP6MUIMREKDDXI4HCFANCNFSM6AAAAAAYUR552A . You are receiving this because you were mentioned.Message ID: @.***>

-- Regards, Tumin

[jocarrd]

perfect. I’ll update the PR On Wed, 31 May 2023 at 15:12, Jorge Carrera @.> wrote: Nice heart Right now the implementation is only present in the examples account form, but can be added to the ci so it could be available to users who add Input using cli let me know what you think about it I believe that those who use the CLI should also enjoy this improvement.It makes sense to add it, as many users utilize the library using the CLI (including myself) — Reply to this email directly, view it on GitHub <#504 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AN34JQ5LCA2EP6MUIMREKDDXI4HCFANCNFSM6AAAAAAYUR552A . You are receiving this because you were mentioned.Message ID: @.> -- Regards, Tumin

Thank you :1st_place_medal:

[christopherpickering]

How will the icons be added when someone installs this component? Right now, icons don't seem to come when you do npx shadcn-ui add input. Maybe you could import directly from 'lucide-react' and list it as a required dep in the docs?

[tuminzee]

@christopherpickering

my implementation was just on the demo page to make sure I was in right direction I'll implement the same in ci part as well so it will also be available with cli generation

I have used lucid react for it

apologies for late response

I'll add a new commit to my PR

Thank you for your time

[christopherpickering]

It's works great for me thanks :) I wish at the same time there would be a way to include other input icons, like a magnify glass for search inputs etc.

[evoloschenko-konstankino]

Nice ❤️

Right now, the implementation is only present in the examples account form but can be added to the ci so it could be available to users who add Input using cli. Let me know what you think about it

Thank you! It really helps :)

[tuminzee]

sorry I was occupied with a lot of unexpected things, because of new releases, my PR is outdated. I will try to resolve all the conflicts, and add additional part for this PR thank you for waiting 🕺🏼

[elioenays]

Thank you! It really helps :)

[tuminzee]

@elioenays sorry for this my pr is way too old. I will have to check all the new updates I will just create a fresh pr for this I guess

[DarkAbhi]

@elioenays sorry for this my pr is way too old. I will have to check all the new updates I will just create a fresh pr for this I guess

You can close this one, when you create the new one.

[tuminzee]

@elioenays have a look at this meanwhile https://github.com/shadcn-ui/ui/pull/1563

[tuminzee]

@DarkAbhi sure 👍🏼

[SkyYap]

              <FormField
                control={form.control}
                name="password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Password</FormLabel>
                    <FormControl>
                    <div className="relative">
                      <Input type={showPassword ? 'text' : 'password'} placeholder="Password" {...field}/>
                        <div className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 cursor-pointer">
                          {showPassword ? (
                            <Icons.eyeOff className="h-6 w-6" onClick={togglePasswordVisibility}/>
                          ) : (
                            <Icons.eye className="h-6 w-6" onClick={togglePasswordVisibility}/>
                          )}
                        </div>
                    </div>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

Above is my code for show/hide password toggle. Hope it helps.

[tuminzee]

I almost did the same thing @SkyYap good work!

[SkyYap]

I almost did the same thing @SkyYap good work!

I face the issue that the react.children.only expected to receive single react element child when I try to have the Icons next to my Input and I wrap it with div and it works perfectly!

[anasmohammed361]

If you are still stuck with this issue

"use client";
import * as React from "react";
import {Icon} from "@iconify/react"

import { cn } from "@/lib/utils";

export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, ...props }, ref) => {
    const [showPassword, setShowPassword] = React.useState(false);
    const togglePasswordVisibility = () => setShowPassword(!showPassword);
  
    return (
      <div className="relative">
        <input
          type={showPassword ? "text" : "password"}
          className={cn(
            "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
            className,
          )}
          ref={ref}
          {...props}
        />
           <div className="absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-400">
        {showPassword ? (
          <Icon
            icon="streamline:visible-solid"
            className="h-4 w-4"
            onClick={togglePasswordVisibility}
          />
        ) : (
          <Icon
            icon="streamline:invisible-1-solid"
            className="h-4 w-4"
            onClick={togglePasswordVisibility}
          />
        )}
      </div>
      </div>
    );
  },
);
Input.displayName = "Input";

export { Input as PasswordInput }

here is my custom component , I've use Iconify for icons you can alter it to your needs.

[imkarimkarim]

i just added this to my component. tnx ❤️ @tuminzee

[tuminzee]

@imkarimkarim sorry I was not able to finish the whole PR but I am happy that this code was useful to you! Cheers 👍🏼

[Dinesht04]

@anasmohammed361 thank you