---
title: Password Input
category: Application
paid: false
isActive: true
ltr: {"react":{"jsxTail":[{"code":"import { useState } from \"react\"\n\nexport default () => {\n\n    const [isPasswordHidden, setPasswordHidden] = useState(true)\n    return (\n        <div>\n            <label className=\"text-gray-600\">\n                Password\n            </label>\n            <div className=\"relative max-w-xs mt-2\">\n                <button className=\"text-gray-400 absolute right-3 inset-y-0 my-auto active:text-gray-600\"\n                    onClick={() => setPasswordHidden(!isPasswordHidden)}\n                >\n                    {\n                        isPasswordHidden ? (\n                            <svg className=\"w-6 h-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth={1.5} stroke=\"currentColor\">\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z\" />\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" />\n                            </svg>\n                        ) : (\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth={1.5} stroke=\"currentColor\" className=\"w-6 h-6\">\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88\" />\n                            </svg>\n\n                        )\n                    }\n                </button>\n                <input\n                    type={isPasswordHidden ? \"password\" : \"text\"}\n                    placeholder=\"Enter your password\"\n                    className=\"w-full pr-12 pl-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n                />\n            </div>\n        </div >\n    )\n}","label":"App.jsx"}],"jsxCss":[]},"html":{"htmlTail":[{"label":"index.html","code":"<div x-data=\"{ isPasswordHidden: true }\">\n    <label class=\"text-gray-600\">\n        Password\n    </label>\n    <div class=\"relative max-w-xs mt-2\">\n        <button @click=\"isPasswordHidden = !isPasswordHidden\" class=\"text-gray-400 absolute right-3 inset-y-0 my-auto active:text-gray-600\">\n            <template x-if=\"isPasswordHidden\">\n                <svg class=\"w-6 h-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z\"></path>\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"></path>\n                </svg>\n            </template>\n            <template x-if=\"!isPasswordHidden\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88\"></path>\n                </svg>\n            </template>\n        </button>\n        <input :type=\"isPasswordHidden ? 'password' : 'text'\" placeholder=\"Enter your password\" class=\"w-full pr-12 pl-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"/>\n    </div>\n</div>\n"}]},"vue":{"vueTail":[{"code":"<template>\n  <div>\n    <label class=\"text-gray-600\">\n      Password\n    </label>\n    <div class=\"relative max-w-xs mt-2\">\n      <button\n        @click=\"togglePasswordVisibility\"\n        class=\"text-gray-400 absolute right-3 inset-y-0 my-auto active:text-gray-600\"\n      >\n        <template v-if=\"isPasswordHidden\">\n          <svg\n            class=\"w-6 h-6\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            :stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              d=\"M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z\"\n            />\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\n            />\n          </svg>\n        </template>\n        <template v-else>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            :stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"w-6 h-6\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              d=\"M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88\"\n            />\n          </svg>\n        </template>\n      </button>\n      <input\n        :type=\"isPasswordHidden ? 'password' : 'text'\"\n        placeholder=\"Enter your password\"\n        class=\"w-full pr-12 pl-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      isPasswordHidden: true\n    };\n  },\n  methods: {\n    togglePasswordVisibility() {\n      this.isPasswordHidden = !this.isPasswordHidden;\n    }\n  }\n};\n</script>\n","label":"App.vue"}],"vueCss":[]},"preview":"function App() {\n\n    const [isPasswordHidden, setPasswordHidden] = useState(true)\n  \n    return (\n        <div className=\"mt-12 max-w-sm mx-auto\">\n            <label className=\"text-gray-600\">\n                Password\n            </label>\n            <div className=\"relative max-w-xs mt-2\">\n                <button className=\"text-gray-400 absolute right-3 inset-y-0 my-auto active:text-gray-600\"\n                    onClick={() => setPasswordHidden(!isPasswordHidden)}\n                >\n                    {\n                        isPasswordHidden ? (\n                            <svg className=\"w-6 h-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth={1.5} stroke=\"currentColor\">\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z\" />\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" />\n                            </svg>\n                        ) : (\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth={1.5} stroke=\"currentColor\" className=\"w-6 h-6\">\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88\" />\n                            </svg>\n\n                        )\n                    }\n                </button>\n                <input\n                    type={isPasswordHidden ? \"password\" : \"text\"}\n                    placeholder=\"Enter your password\"\n                    className=\"w-full pr-12 pl-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n                />\n            </div>\n        </div >\n    )\n}","svelte":{"svelteTail":[{"code":"<script>\n    let isPasswordHidden = true;\n\n    function togglePasswordVisibility() {\n        isPasswordHidden = !isPasswordHidden;\n    }\n</script>\n\n<div>\n    <label class=\"text-gray-600\">\n        Password\n    </label>\n    <div class=\"relative max-w-xs mt-2\">\n        <button \n            class=\"text-gray-400 absolute right-3 inset-y-0 my-auto active:text-gray-600\"\n            on:click={togglePasswordVisibility}\n        >\n            {#if isPasswordHidden}\n                <svg class=\"w-6 h-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z\" />\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" />\n                </svg>\n            {:else}\n                <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88\" />\n                </svg>\n            {/if}\n        </button>\n        <input\n            type={isPasswordHidden ? \"password\" : \"text\"}\n            placeholder=\"Enter your password\"\n            class=\"w-full pr-12 pl-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n        />\n    </div>\n</div>","label":"App.svelte"}]}}
slug: /inputs
id: b2a133ec-b5c7-458e-be9a-f28b45e133a6
created_at: 1668380925278
---

<FUIPasswordInput />