Enhanced Inputs

<e-input type="text" name="username" label="Username" placeholder="johndoe" description="Choose a unique username" min="3" max="20" validate-on="input|blur"> </e-input> <e-input type="email" name="email" label="Email Address" placeholder="you@example.com" validate-on="blur" description="We'll never share your email" required> </e-input> <e-input type="password" name="password" label="Password" action-button="show" placeholder="Enter secure password" min="8" validate-on="input" description="Use a strong password" required> </e-input> <e-input type="number" name="age" label="Age" placeholder="25" min="18" max="100" validate-on="change" description="Enter your age" required> </e-input> <e-input type="phone" name="phone" label="Phone Number" placeholder="(555) 123-4567" validate-on="blur" description="Include country code"> </e-input> <e-input type="url" name="website" label="Website URL" placeholder="https://example.com" validate-on="blur" description="Enter your website URL"> </e-input> <e-input type="search" name="query" label="Search" placeholder="Search products..." action-button="clear" validate-on="input" min="2" description="Type at least 2 characters"> </e-input> United States Canada United Kingdom Germany France Japan Australia Brazil India China Russia South Africa Mexico South Korea Italy Spain Netherlands Sweden Norway Denmark Finland Poland Turkey Argentina Colombia Peru Chile Venezuela Ecuador Uruguay Paraguay Bolivia Guyana Suriname French Guiana Falkland Islands <e-input type="select" name="country" label="Country" placeholder="Select a country" searchable validate-on="change" description="Choose your country from the list"> <e-select-option value="us">United States</e-select-option> <e-select-option value="ca">Canada</e-select-option> <e-select-option value="uk">United Kingdom</e-select-option> <e-select-option value="de">Germany</e-select-option> <e-select-option value="fr">France</e-select-option> <e-select-option value="jp">Japan</e-select-option> <e-select-option value="au">Australia</e-select-option> <e-select-option value="br">Brazil</e-select-option> <e-select-option value="in">India</e-select-option> <e-select-option value="cn">China</e-select-option> <e-select-option value="ru">Russia</e-select-option> <e-select-option value="za">South Africa</e-select-option> <e-select-option value="mx">Mexico</e-select-option> <e-select-option value="kr">South Korea</e-select-option> <e-select-option value="it">Italy</e-select-option> <e-select-option value="es">Spain</e-select-option> <e-select-option value="nl">Netherlands</e-select-option> <e-select-option value="se">Sweden</e-select-option> <e-select-option value="no">Norway</e-select-option> <e-select-option value="dk">Denmark</e-select-option> <e-select-option value="fi">Finland</e-select-option> <e-select-option value="pl">Poland</e-select-option> <e-select-option value="tr">Turkey</e-select-option> <e-select-option value="ar">Argentina</e-select-option> <e-select-option value="co">Colombia</e-select-option> <e-select-option value="pe">Peru</e-select-option> <e-select-option value="cl">Chile</e-select-option> <e-select-option value="ve">Venezuela</e-select-option> <e-select-option value="ec">Ecuador</e-select-option> <e-select-option value="uy">Uruguay</e-select-option> <e-select-option value="py">Paraguay</e-select-option> <e-select-option value="bo">Bolivia</e-select-option> <e-select-option value="gy">Guyana</e-select-option> <e-select-option value="sr">Suriname</e-select-option> <e-select-option value="gf">French Guiana</e-select-option> <e-select-option value="fk">Falkland Islands</e-select-option> </e-input> <e-input type="combobox" name="programming_language" label="Programming Language" placeholder="Search languages..." validate-on="change" description="Search and select your favorite programming language"> <e-combobox-option value="javascript" label="JavaScript" description="Popular scripting language"></e-combobox-option> <e-combobox-option value="typescript" label="TypeScript" description="Typed JavaScript superset"></e-combobox-option> <e-combobox-option value="python" label="Python" description="Versatile general-purpose language"></e-combobox-option> <e-combobox-option value="java" label="Java" description="Enterprise-grade object-oriented language"></e-combobox-option> <e-combobox-option value="csharp" label="C#" description="Microsoft's modern .NET language"></e-combobox-option> <e-combobox-option value="php" label="PHP" description="Server-side web development language"></e-combobox-option> <e-combobox-option value="ruby" label="Ruby" description="Elegant scripting language"></e-combobox-option> <e-combobox-option value="go" label="Go" description="Google's concurrent programming language"></e-combobox-option> <e-combobox-option value="rust" label="Rust" description="Systems programming with memory safety"></e-combobox-option> <e-combobox-option value="swift" label="Swift" description="Apple's modern programming language"></e-combobox-option> <e-combobox-option value="kotlin" label="Kotlin" description="Modern JVM language"></e-combobox-option> <e-combobox-option value="dart" label="Dart" description="Google's UI-focused language"></e-combobox-option> <e-combobox-option value="scala" label="Scala" description="Scalable JVM language"></e-combobox-option> <e-combobox-option value="r" label="R" description="Statistical computing language"></e-combobox-option> <e-combobox-option value="perl" label="Perl" description="Powerful text processing language"></e-combobox-option> <e-combobox-option value="lua" label="Lua" description="Lightweight scripting language"></e-combobox-option> <e-combobox-option value="elixir" label="Elixir" description="Functional language on Erlang VM"></e-combobox-option> <e-combobox-option value="clojure" label="Clojure" description="Lisp dialect on JVM"></e-combobox-option> <e-combobox-option value="haskell" label="Haskell" description="Purely functional programming language"></e-combobox-option> </e-input> <e-input type="radio" name="contact_method" label="Preferred Contact Method" value="email" validate-on="change" description="How would you like us to contact you?" required> <e-radio-option value="email">Email</e-radio-option> <e-radio-option value="phone">Phone</e-radio-option> <e-radio-option value="sms">SMS</e-radio-option> </e-input> <e-input type="checkbox-group" name="interests" label="Interests" description="Select your interests" validate-on="change" required> <e-checkbox-option value="sports">Sports</e-checkbox-option> <e-checkbox-option value="music">Music</e-checkbox-option> <e-checkbox-option value="technology">Technology</e-checkbox-option> </e-input> <e-input type="toggle" name="notifications" label="Enable Notifications" description="Receive push notifications" on-label="On" off-label="Off" validate-on="change" required> </e-input> <e-input type="textarea" name="message" label="Message" placeholder="Enter your message here..." description="Share your thoughts" max="500" rows="4" validate-on="input|blur"> </e-input> <e-input type="date" name="birthday" label="Birth Date" validate-on="change" description="Select your birth date"> </e-input> <e-input type="date" name="check" label="Date" validate-on="change" range description="Select checkin and checkout date"> </e-input> <e-input type="range" name="range" label="Range" min="0" max="100" step="5" validate-on="change" range description="Select a value range"> </e-input> <e-input type="color" name="theme" label="Theme Color" value="#6366f1" validate-on="change" description="Choose your theme color" > </e-input> <e-input type="email" name="advanced_email" label="Email Address" description="Enter your email address" placeholder="user@example.com" validate-on="blur" required min="5" min-message="Minimum length is 5 characters" max="100" regex="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" ends-with="gmail.com" lowercase="true"> </e-input> <e-input type="url" name="website" label="Website" placeholder="example.com" validate-on="blur" prefix="https://" prefix-value="https://" format="url" format-message="Invalid URL format." ends-with=".gov" required> </e-input> <e-input type="text" name="emoji" label="Emoji" placeholder="😊" validate-on="blur" format="emoji" required> </e-input> <e-input type="text" name="apiKey" label="API Key" placeholder="e1a6a0d3-3024-4158-a42b-8e2bb041f7f6" validate-on="blur" format="uuid" format-message="Invalid API Key" action-button="copy" required> </e-input> <e-input type="text" name="ip4" label="IPv4" placeholder="192.168.0.1" validate-on="blur" format="ipv4" starts-with="192" mask="ip" required> </e-input> <e-input type="text" name="iso_date" label="Date" placeholder="2022-01-01" validate-on="blur" format="iso-date" required> </e-input> <e-input type="text" name="date_time" label="Date Time" placeholder="2022-01-01T12:00:00" validate-on="blur" format="iso-datetime" required> </e-input> <e-input type="text" name="base64" label="Base64" placeholder="SGVsbG8gd29ybGQ=" validate-on="blur" format="base64" required> </e-input> <e-input type="text" name="base64url" label="Base64URL" placeholder="SGVsbG8gd29ybGQ=" validate-on="blur" format="base64url" required> </e-input> <e-input type="password" name="show_password" label="Password" placeholder="Password" action-button="show" validate-on="blur" required> </e-input> <e-input type="number" name="amount" label="Amount" placeholder="100" validate-on="blur" format="number" gte="10" positive required> </e-input>