HomeOnTour Logo6UI

Input Password

Input password component with show/hide password button.

Loading example...
import { useState } from "react"
import { InputPassword } from "@/components/homeontour-ui/input-password"

export function DefaultExample() {
  const [value, setValue] = useState("")

  return (
    <InputPassword
      placeholder="Password"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  )
}

Installation

pnpm dlx homeontour-ui@latest add input-password

Usage

import { InputPassword } from "@/components/homeontour-ui/input-password"
<InputPassword />

Examples

Form

Input password used with shadcn/ui Field component

Loading example...
import { useState } from "react"
import { InputPassword } from "@/components/homeontour-ui/input-password"
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'

export function FormExample() {
  const [password, setPassword] = useState("")

  return (
    <Field>
      <FieldLabel htmlFor="password">Password</FieldLabel>
      <InputPassword
        id="password"
        placeholder="Enter your password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <FieldDescription>
        Your password is encrypted and stored securely.
      </FieldDescription>
    </Field>
  )
}