Inputs

<x-input color="neutral" placeholder="neutral" />
<x-input color="primary" placeholder="primary" />
<x-input color="info" placeholder="info" />
<x-input color="success" placeholder="success" />
<x-input color="warning" placeholder="warning" />
<x-input color="error" placeholder="error" />

<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c2e52e" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="neutral">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c2e59f" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="primary">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-info focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c2e600" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="info">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-success focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c2e65e" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="success">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-warning focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c2e6b9" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="warning">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-error focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c2e714" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="error">
</div>
</div>
</div>

<x-input appearance="soft" color="neutral" placeholder="neutral" />
<x-input appearance="soft" color="primary" placeholder="primary" />
<x-input appearance="soft" color="info" placeholder="info" />
<x-input appearance="soft" color="success" placeholder="success" />
<x-input appearance="soft" color="warning" placeholder="warning" />
<x-input appearance="soft" color="error" placeholder="error" />

<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-200 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c3b818" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="neutral">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-primary/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c3b886" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="primary">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-info/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c3b8dd" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="info">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-success/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c3b93b" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="success">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-warning/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c3b997" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="warning">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-error/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c3b9f2" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="error">
</div>
</div>
</div>

<x-input appearance="underline" color="neutral" placeholder="neutral" />
<x-input appearance="underline" color="primary" placeholder="primary" />
<x-input appearance="underline" color="info" placeholder="info" />
<x-input appearance="underline" color="success" placeholder="success" />
<x-input appearance="underline" color="warning" placeholder="warning" />
<x-input appearance="underline" color="error" placeholder="error" />

<div class="w-full">
<div class="flex items-stretch transition-colors bg-transparent border-b border-base-300 focus-within:border-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c45e27" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="neutral">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors bg-transparent border-b border-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c45e92" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="primary">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors bg-transparent border-b border-info h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c45eea" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="info">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors bg-transparent border-b border-success h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c45f3d" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="success">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors bg-transparent border-b border-warning h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c45f8e" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="warning">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors bg-transparent border-b border-error h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c45fe3" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="error">
</div>
</div>
</div>

<x-input appearance="ghost" color="neutral" placeholder="neutral" />
<x-input appearance="ghost" color="primary" placeholder="primary" />
<x-input appearance="ghost" color="info" placeholder="info" />
<x-input appearance="ghost" color="success" placeholder="success" />
<x-input appearance="ghost" color="warning" placeholder="warning" />
<x-input appearance="ghost" color="error" placeholder="error" />

<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-transparent tune-border border-transparent hover:bg-base-200/60 focus-within:bg-base-200 h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c50324" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="neutral">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-transparent tune-border border-transparent hover:bg-primary/5 focus-within:bg-primary/10 h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c5038a" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="primary">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-transparent tune-border border-transparent hover:bg-info/5 focus-within:bg-info/10 h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c503e2" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="info">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-transparent tune-border border-transparent hover:bg-success/5 focus-within:bg-success/10 h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c50438" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="success">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-transparent tune-border border-transparent hover:bg-warning/5 focus-within:bg-warning/10 h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c50489" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="warning">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-transparent tune-border border-transparent hover:bg-error/5 focus-within:bg-error/10 h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c504da" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="error">
</div>
</div>
</div>

<x-input size="sm" placeholder="size sm" />
<x-input size="md" placeholder="size md (default)" />
<x-input size="lg" placeholder="size lg" />

<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-sm)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c5a3d7" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-sm)] px-[var(--px-input-sm)]" placeholder="size sm">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c5a440" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="size md (default)">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-lg)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c5a49d" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-lg)] px-[var(--px-input-lg)]" placeholder="size lg">
</div>
</div>
</div>

<x-input label="Email address" name="email" placeholder="you@example.com" hint="Use half-width alphanumeric characters" />
<x-input label="Password" name="password" type="password" required corner-hint="required" placeholder="8 characters or more" />
<x-input label="Username" name="user" placeholder="take***" error="That username is already taken" />
<x-input label="Memo" corner-hint="max 100 characters" placeholder="optional" hint="Leaving this blank is fine" />

<div class="w-full">
<div class="flex items-baseline justify-between mb-1.5">
<label for="email_6a7e9b4c5fbeb" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Email address</label>
</div>
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="email_6a7e9b4c5fbeb" name="email" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="you@example.com">
</div>
</div>
<p class="mt-1.5 text-[length:var(--text-field-sm)] text-base-content/50">
        Use half-width alphanumeric characters
    </p>
</div>
<div class="w-full">
<div class="flex items-baseline justify-between mb-1.5">
<label for="password_6a7e9b4c5fc58" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Password <span class="text-error ml-0.5">*</span></label>
<span class="text-[length:var(--text-field-xs)] text-base-content/50">required</span>
</div>
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="password" id="password_6a7e9b4c5fc58" name="password" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="8 characters or more" required="">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-baseline justify-between mb-1.5">
<label for="user_6a7e9b4c5fcb4" class="block text-[length:var(--text-field-sm)] font-medium text-error">Username</label>
</div>
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-error focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="user_6a7e9b4c5fcb4" name="user" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="take***">
</div>
</div>
<p class="mt-1.5 text-[length:var(--text-field-sm)] text-error">
        That username is already taken
    </p>
</div>
<div class="w-full">
<div class="flex items-baseline justify-between mb-1.5">
<label for="input_6a7e9b4c5fd0a" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Memo</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/50">max 100 characters</span>
</div>
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c5fd0a" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="optional">
</div>
</div>
<p class="mt-1.5 text-[length:var(--text-field-sm)] text-base-content/50">
        Leaving this blank is fine
    </p>
</div>

<x-input icon-left="magnifer" placeholder="Search…" />
<x-input icon-right="calendar" placeholder="Pick a date" />
<x-input icon-left="letter" placeholder="name@company.com" color="success" hint="OK" />
<x-input icon-left="lock-password" type="password" icon-right="eye" placeholder="Password" />

<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40 pointer-events-none"><svg class="w-4 h-4" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="11.5" cy="11.5" r="9.5"></circle>
<path stroke-linecap="round" d="M18.5 18.5L22 22"></path>
</g></svg></span>
<input type="text" id="input_6a7e9b4c6bfca" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] pl-10" placeholder="Search…">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c6c1ff" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)] pr-10" placeholder="Pick a date">
<span class="absolute inset-y-0 right-0 flex items-center pr-3 text-base-content/40 pointer-events-none"><svg class="w-4 h-4" viewbox="0 0 24 24">
<g fill="none">
<path stroke="currentColor" stroke-width="1.5" d="M2 12c0-3.771 0-5.657 1.172-6.828S6.229 4 10 4h4c3.771 0 5.657 0 6.828 1.172S22 8.229 22 12v2c0 3.771 0 5.657-1.172 6.828S17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172S2 17.771 2 14z"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M7 4V2.5M17 4V2.5M2.5 9h19"></path>
<path fill="currentColor" d="M18 17a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0"></path>
</g></svg></span>
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-success focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40 pointer-events-none"><svg class="w-4 h-4" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M2 12c0-3.771 0-5.657 1.172-6.828S6.229 4 10 4h4c3.771 0 5.657 0 6.828 1.172S22 8.229 22 12s0 5.657-1.172 6.828S17.771 20 14 20h-4c-3.771 0-5.657 0-6.828-1.172S2 15.771 2 12Z"></path>
<path stroke-linecap="round" d="m6 8l2.159 1.8c1.837 1.53 2.755 2.295 3.841 2.295s2.005-.765 3.841-2.296L18 8"></path>
</g></svg></span>
<input type="text" id="input_6a7e9b4c6c399" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] pl-10" placeholder="name@company.com">
</div>
</div>
<p class="mt-1.5 text-[length:var(--text-field-sm)] text-base-content/50">
        OK
    </p>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40 pointer-events-none"><svg class="w-4 h-4" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor">
<path stroke-width="1.5" d="M2 16c0-2.828 0-4.243.879-5.121C3.757 10 5.172 10 8 10h8c2.828 0 4.243 0 5.121.879C22 11.757 22 13.172 22 16s0 4.243-.879 5.121C20.243 22 18.828 22 16 22H8c-2.828 0-4.243 0-5.121-.879C2 20.243 2 18.828 2 16Z"></path>
<path stroke-linecap="round" stroke-width="1.5" d="M6 10V8a6 6 0 1 1 12 0v2"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16h.009m3.982 0H12m3.991 0H16"></path>
</g></svg></span>
<input type="password" id="input_6a7e9b4c6c481" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] pl-10 pr-10" placeholder="Password">
<span class="absolute inset-y-0 right-0 flex items-center pr-3 text-base-content/40 pointer-events-none"><svg class="w-4 h-4" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g></svg></span>
</div>
</div>
</div>

<x-input prefix="https://" placeholder="example.com" />
<x-input suffix=".com" placeholder="example" />
<x-input prefix="$" suffix="tax incl." placeholder="0" />
<x-input prefix="@" placeholder="username" />

<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<span class="flex items-center shrink-0 bg-base-200 text-base-content/60 px-[var(--px-input-md)] text-[length:var(--text-field-md)] border-r border-base-300">https://</span>
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c785ef" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="example.com">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c78652" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="example">
</div><span class="flex items-center shrink-0 bg-base-200 text-base-content/60 px-[var(--px-input-md)] text-[length:var(--text-field-md)] border-l border-base-300">.com</span>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<span class="flex items-center shrink-0 bg-base-200 text-base-content/60 px-[var(--px-input-md)] text-[length:var(--text-field-md)] border-r border-base-300">$</span>
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c786ad" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="0">
</div><span class="flex items-center shrink-0 bg-base-200 text-base-content/60 px-[var(--px-input-md)] text-[length:var(--text-field-md)] border-l border-base-300">tax incl.</span>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<span class="flex items-center shrink-0 bg-base-200 text-base-content/60 px-[var(--px-input-md)] text-[length:var(--text-field-md)] border-r border-base-300">@</span>
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c78704" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="username">
</div>
</div>
</div>

<x-input placeholder="Keyword">
    <x-slot:append>
        <button type="button" class="px-[var(--px-field-md)] bg-primary text-primary-content text-[length:var(--text-field-sm)] font-medium cursor-pointer hover:bg-primary/90 transition-colors">
            Search
        </button>
    </x-slot:append>
</x-input>
<x-input placeholder="Coupon code" icon-left="key">
    <x-slot:append>
        <button type="button" class="px-[var(--px-field-md)] bg-base-200 text-base-content border-l border-base-300 text-[length:var(--text-field-sm)] font-medium cursor-pointer hover:bg-base-300 transition-colors">
            Apply
        </button>
    </x-slot:append>
</x-input>

<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c80bd7" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="Keyword">
</div>
<div class="shrink-0 flex items-stretch">
<button type="button" class="px-[var(--px-field-md)] bg-primary text-primary-content text-[length:var(--text-field-sm)] font-medium cursor-pointer hover:bg-primary/90 transition-colors">Search</button>
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40 pointer-events-none"><svg class="w-4 h-4" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path stroke-linejoin="round" d="M15.68 14.587c3.49 0 6.32-2.818 6.32-6.294S19.17 2 15.68 2S9.363 4.818 9.363 8.293c0 1.61.734 2.781.734 2.781l-7.642 7.61c-.343.342-.823 1.23 0 2.05l.882.878c.343.293 1.205.703 1.91 0l1.03-1.024c1.028 1.024 2.204.439 2.645-.147c.734-1.024-.147-2.049-.147-2.049l.294-.293c1.41 1.406 2.645.586 3.086 0c.735-1.024 0-2.049 0-2.049c-.294-.585-.882-.585-.147-1.317l.882-.878c.705.585 2.155.732 2.792.732Z"></path>
<path d="M17.885 8.294a2.2 2.2 0 0 1-2.204 2.195a2.2 2.2 0 0 1-2.204-2.195a2.2 2.2 0 0 1 2.204-2.196a2.2 2.2 0 0 1 2.204 2.196Z"></path>
</g></svg></span>
<input type="text" id="input_6a7e9b4c80c42" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] pl-10" placeholder="Coupon code">
</div>
<div class="shrink-0 flex items-stretch">
<button type="button" class="px-[var(--px-field-md)] bg-base-200 text-base-content border-l border-base-300 text-[length:var(--text-field-sm)] font-medium cursor-pointer hover:bg-base-300 transition-colors">Apply</button>
</div>
</div>
</div>

<x-input floating size="sm" label="Username" name="floating_user_sm" />
<x-input floating size="md" label="Email address" name="floating_email_md" type="email" />
<x-input floating size="lg" label="Phone number" name="floating_tel_lg" type="tel" required />

<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-sm)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="floating_user_sm_6a7e9b4c87070" placeholder="" name="floating_user_sm" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-sm)] px-[var(--px-input-sm)] pt-3.5 pb-0.5">
<label for="floating_user_sm_6a7e9b4c87070" class="absolute left-[var(--px-input-sm)] top-1/2 -translate-y-1/2 text-base-content/50 pointer-events-none origin-[0_0] transition-all duration-150 text-[length:var(--text-field-sm)] peer-focus:top-0.5 peer-focus:translate-y-0 peer-focus:text-[length:var(--text-field-xs)] peer-focus:text-base-content/60 peer-[:not(:placeholder-shown)]:top-0.5 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:text-[length:var(--text-field-xs)] peer-[:not(:placeholder-shown)]:text-base-content/60">Username</label>
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="email" id="floating_email_md_6a7e9b4c870d4" placeholder="" name="floating_email_md" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)] pt-4 pb-0.5">
<label for="floating_email_md_6a7e9b4c870d4" class="absolute left-[var(--px-input-md)] top-1/2 -translate-y-1/2 text-base-content/50 pointer-events-none origin-[0_0] transition-all duration-150 text-[length:var(--text-field-md)] peer-focus:top-1 peer-focus:translate-y-0 peer-focus:text-[length:var(--text-field-xs)] peer-focus:text-base-content/60 peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:text-[length:var(--text-field-xs)] peer-[:not(:placeholder-shown)]:text-base-content/60">Email address</label>
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-lg)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="tel" id="floating_tel_lg_6a7e9b4c8712e" placeholder="" name="floating_tel_lg" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-lg)] px-[var(--px-input-lg)] pt-5 pb-1" required="">
<label for="floating_tel_lg_6a7e9b4c8712e" class="absolute left-[var(--px-input-lg)] top-1/2 -translate-y-1/2 text-base-content/50 pointer-events-none origin-[0_0] transition-all duration-150 text-[length:var(--text-field-lg)] peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-[length:var(--text-field-xs)] peer-focus:text-base-content/60 peer-[:not(:placeholder-shown)]:top-2 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:text-[length:var(--text-field-xs)] peer-[:not(:placeholder-shown)]:text-base-content/60">Phone number <span class="text-error ml-0.5">*</span></label>
</div>
</div>
</div>

<x-input floating size="sm" label="Search" icon-left="magnifer" name="floating_search_sm" />
<x-input floating size="md" label="Email address" icon-left="letter" type="email" name="floating_email_icon_md" />
<x-input floating size="lg" label="Phone number" icon-left="phone" type="tel" required name="floating_tel_icon_lg" />

<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-sm)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40 pointer-events-none"><svg class="w-4 h-4" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="11.5" cy="11.5" r="9.5"></circle>
<path stroke-linecap="round" d="M18.5 18.5L22 22"></path>
</g></svg></span>
<input type="text" id="floating_search_sm_6a7e9b4c8e9f9" placeholder="" name="floating_search_sm" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-sm)] pl-10 pt-3.5 pb-0.5">
<label for="floating_search_sm_6a7e9b4c8e9f9" class="absolute left-10 top-1/2 -translate-y-1/2 text-base-content/50 pointer-events-none origin-[0_0] transition-all duration-150 text-[length:var(--text-field-sm)] peer-focus:top-0.5 peer-focus:translate-y-0 peer-focus:text-[length:var(--text-field-xs)] peer-focus:text-base-content/60 peer-[:not(:placeholder-shown)]:top-0.5 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:text-[length:var(--text-field-xs)] peer-[:not(:placeholder-shown)]:text-base-content/60">Search</label>
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40 pointer-events-none"><svg class="w-4 h-4" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M2 12c0-3.771 0-5.657 1.172-6.828S6.229 4 10 4h4c3.771 0 5.657 0 6.828 1.172S22 8.229 22 12s0 5.657-1.172 6.828S17.771 20 14 20h-4c-3.771 0-5.657 0-6.828-1.172S2 15.771 2 12Z"></path>
<path stroke-linecap="round" d="m6 8l2.159 1.8c1.837 1.53 2.755 2.295 3.841 2.295s2.005-.765 3.841-2.296L18 8"></path>
</g></svg></span>
<input type="email" id="floating_email_icon_md_6a7e9b4c8eaba" placeholder="" name="floating_email_icon_md" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] pl-10 pt-4 pb-0.5">
<label for="floating_email_icon_md_6a7e9b4c8eaba" class="absolute left-10 top-1/2 -translate-y-1/2 text-base-content/50 pointer-events-none origin-[0_0] transition-all duration-150 text-[length:var(--text-field-md)] peer-focus:top-1 peer-focus:translate-y-0 peer-focus:text-[length:var(--text-field-xs)] peer-focus:text-base-content/60 peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:text-[length:var(--text-field-xs)] peer-[:not(:placeholder-shown)]:text-base-content/60">Email address</label>
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-lg)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40 pointer-events-none"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="currentColor" d="m16.1 13.359l-.528-.532zm.456-.453l.529.532zm2.417-.317l-.358.66zm1.91 1.039l-.358.659zm.539 3.255l.529.532zm-1.42 1.412l-.53-.531zm-1.326.67l.07.747zm-9.86-4.238l.528-.532zM4.002 5.746l-.749.042zm6.474 1.451l.53.532zm.157-2.654l.6-.449zM9.374 2.86l-.601.45zM6.26 2.575l.53.532zm-1.57 1.56l-.528-.531zm7.372 7.362l.529-.532zm4.567 2.394l.455-.453l-1.058-1.064l-.455.453zm1.985-.643l1.91 1.039l.716-1.318l-1.91-1.038zm2.278 3.103l-1.42 1.413l1.057 1.063l1.42-1.412zm-2.286 1.867c-1.45.136-5.201.015-9.263-4.023l-1.057 1.063c4.432 4.407 8.65 4.623 10.459 4.454zm-9.263-4.023c-3.871-3.85-4.512-7.087-4.592-8.492l-1.498.085c.1 1.768.895 5.356 5.033 9.47zm1.376-6.18l.286-.286L9.95 6.666l-.287.285zm.515-3.921L9.974 2.41l-1.201.899l1.26 1.684zM5.733 2.043l-1.57 1.56l1.058 1.064l1.57-1.56zm4.458 5.44c-.53-.532-.53-.532-.53-.53h-.002l-.003.004a1 1 0 0 0-.127.157c-.054.08-.113.185-.163.318a2.1 2.1 0 0 0-.088 1.071c.134.865.73 2.008 2.256 3.526l1.058-1.064c-1.429-1.42-1.769-2.284-1.832-2.692c-.03-.194.001-.29.01-.312q.009-.02 0-.006a.3.3 0 0 1-.03.039l-.01.01l-.01.009zm1.343 4.546c1.527 1.518 2.676 2.11 3.542 2.242c.443.068.8.014 1.071-.087a1.5 1.5 0 0 0 .42-.236l.05-.045l.007-.006l.003-.003l.001-.002s.002-.001-.527-.533c-.53-.532-.528-.533-.528-.533l.002-.002l.002-.002l.006-.005l.01-.01l.038-.03q.014-.009-.007.002c-.025.009-.123.04-.32.01c-.414-.064-1.284-.404-2.712-1.824zm-1.56-9.62C8.954 1.049 6.95.834 5.733 2.044L6.79 3.107c.532-.529 1.476-.475 1.983.202zM4.752 5.704c-.02-.346.139-.708.469-1.036L4.163 3.604c-.537.534-.96 1.29-.909 2.184zm14.72 12.06c-.274.274-.57.428-.865.455l.139 1.494c.735-.069 1.336-.44 1.784-.885zM11.006 7.73c.985-.979 1.058-2.527.229-3.635l-1.201.899c.403.539.343 1.246-.085 1.673zm9.52 6.558c.817.444.944 1.49.367 2.064l1.058 1.064c1.34-1.333.927-3.557-.71-4.446zm-3.441-.849c.384-.382 1.002-.476 1.53-.19l.716-1.317c-1.084-.59-2.428-.427-3.304.443z"></path></svg></span>
<input type="tel" id="floating_tel_icon_lg_6a7e9b4c8eb68" placeholder="" name="floating_tel_icon_lg" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-lg)] pl-10 pt-5 pb-1" required="">
<label for="floating_tel_icon_lg_6a7e9b4c8eb68" class="absolute left-10 top-1/2 -translate-y-1/2 text-base-content/50 pointer-events-none origin-[0_0] transition-all duration-150 text-[length:var(--text-field-lg)] peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-[length:var(--text-field-xs)] peer-focus:text-base-content/60 peer-[:not(:placeholder-shown)]:top-2 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:text-[length:var(--text-field-xs)] peer-[:not(:placeholder-shown)]:text-base-content/60">Phone number <span class="text-error ml-0.5">*</span></label>
</div>
</div>
</div>

<x-input floating label="Soft appearance" appearance="soft" />
<x-input floating label="Underline appearance" appearance="underline" />
<x-input floating label="Ghost appearance" appearance="ghost" icon-left="user" />
<x-input floating label="Error example" icon-left="info-circle" error="Invalid input" />

<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-200 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c98fe7" placeholder="" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)] pt-4 pb-0.5">
<label for="input_6a7e9b4c98fe7" class="absolute left-[var(--px-input-md)] top-1/2 -translate-y-1/2 text-base-content/50 pointer-events-none origin-[0_0] transition-all duration-150 text-[length:var(--text-field-md)] peer-focus:top-1 peer-focus:translate-y-0 peer-focus:text-[length:var(--text-field-xs)] peer-focus:text-base-content/60 peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:text-[length:var(--text-field-xs)] peer-[:not(:placeholder-shown)]:text-base-content/60">Soft appearance</label>
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors bg-transparent border-b border-base-300 focus-within:border-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4c99047" placeholder="" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)] pt-4 pb-0.5">
<label for="input_6a7e9b4c99047" class="absolute left-[var(--px-input-md)] top-1/2 -translate-y-1/2 text-base-content/50 pointer-events-none origin-[0_0] transition-all duration-150 text-[length:var(--text-field-md)] peer-focus:top-1 peer-focus:translate-y-0 peer-focus:text-[length:var(--text-field-xs)] peer-focus:text-base-content/60 peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:text-[length:var(--text-field-xs)] peer-[:not(:placeholder-shown)]:text-base-content/60">Underline appearance</label>
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-transparent tune-border border-transparent hover:bg-base-200/60 focus-within:bg-base-200 h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40 pointer-events-none"><svg class="w-4 h-4" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="6" r="4"></circle>
<path d="M20 17.5c0 2.485 0 4.5-8 4.5s-8-2.015-8-4.5S7.582 13 12 13s8 2.015 8 4.5Z"></path>
</g></svg></span>
<input type="text" id="input_6a7e9b4c9909f" placeholder="" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] pl-10 pt-4 pb-0.5">
<label for="input_6a7e9b4c9909f" class="absolute left-10 top-1/2 -translate-y-1/2 text-base-content/50 pointer-events-none origin-[0_0] transition-all duration-150 text-[length:var(--text-field-md)] peer-focus:top-1 peer-focus:translate-y-0 peer-focus:text-[length:var(--text-field-xs)] peer-focus:text-base-content/60 peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:text-[length:var(--text-field-xs)] peer-[:not(:placeholder-shown)]:text-base-content/60">Ghost appearance</label>
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-error focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40 pointer-events-none"><svg class="w-4 h-4" viewbox="0 0 24 24">
<g fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
<circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
</g></svg></span>
<input type="text" id="input_6a7e9b4c992fa" placeholder="" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] pl-10 pt-4 pb-0.5">
<label for="input_6a7e9b4c992fa" class="absolute left-10 top-1/2 -translate-y-1/2 text-base-content/50 pointer-events-none origin-[0_0] transition-all duration-150 text-[length:var(--text-field-md)] peer-focus:top-1 peer-focus:translate-y-0 peer-focus:text-[length:var(--text-field-xs)] peer-focus:text-base-content/60 peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:text-[length:var(--text-field-xs)] peer-[:not(:placeholder-shown)]:text-base-content/60">Error example</label>
</div>
</div>
<p class="mt-1.5 text-[length:var(--text-field-sm)] text-error">
        Invalid input
    </p>
</div>

<x-input label="Disabled" disabled placeholder="Cannot be edited" />
<x-input label="Readonly" readonly value="Read-only value" />

<div class="w-full">
<div class="flex items-baseline justify-between mb-1.5">
<label for="input_6a7e9b4ca41aa" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Disabled</label>
</div>
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary opacity-60 cursor-not-allowed h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4ca41aa" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="Cannot be edited" disabled>
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-baseline justify-between mb-1.5">
<label for="input_6a7e9b4ca4208" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Readonly</label>
</div>
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b4ca4208" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" value="Read-only value" readonly>
</div>
</div>
</div>