32 lines
908 B
Svelte
32 lines
908 B
Svelte
<script lang="ts">
|
|
import type { ClassValue } from 'svelte/elements';
|
|
|
|
const {
|
|
class: className = undefined,
|
|
id,
|
|
name,
|
|
label = 'Password',
|
|
required = false,
|
|
}: {
|
|
class?: ClassValue;
|
|
id: string;
|
|
name: string;
|
|
required?: boolean;
|
|
label?: string;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class="relative {className ?? ''}">
|
|
<input
|
|
{id}
|
|
type="password"
|
|
{name}
|
|
class="peer w-full min-w-0 rounded bg-gray-200 px-2 py-1.5 text-black"
|
|
placeholder=""
|
|
{required}
|
|
/>
|
|
<label
|
|
class="pointer-events-none absolute -top-6 left-0 text-sm transition-[translate,color,font-size] peer-placeholder-shown:translate-x-2 peer-placeholder-shown:translate-y-7.5 peer-placeholder-shown:text-base peer-placeholder-shown:text-black/50 peer-focus:translate-x-0 peer-focus:translate-y-0 peer-focus:text-sm peer-focus:text-white"
|
|
for={id}>{label}</label
|
|
>
|
|
</div>
|