Day 1 - Component Challenge

Challenge UI with Livewire & Alpine.js

Source

Press ESC to exit

Day 1

UI Input Component Showcase

Reusable input component with multiple variants, icons, and features

Email Address

We'll never share your email

Username

Website

Phone Number

Password (No Toggle)

Password (With Toggle)

Minimum 8 characters

Small Input

Medium Input (Default)

Large Input

Default Variant

Filled Variant

Outlined Variant

Required Field *

Disabled Input

Readonly Input

Input with Error

This field contains an error

Date

Credit Card

Company

Location

Input with Loading Icon

The icon can be any Lucide icon including loader-circle

Clean Input

Works perfectly fine without an icon