inputs.js

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

<input-text
  name="base64"
  label="Base64"
  placeholder="SGVsbG8gd29ybGQ="
  validate-on="blur"
  format="base64"
  required>
</input-text>

<input-text
  name="base64url"
  label="Base64URL"
  placeholder="SGVsbG8gd29ybGQ="
  validate-on="blur"
  format="base64url"
  required>
</input-text>

<input-password
  name="show_password"
  label="Password"
  placeholder="Password"
  action-button="show"
  validate-on="blur"
  required>
</input-password>

<input-number
  name="amount"
  label="Amount"
  placeholder="100"
  validate-on="blur"
  format="number"
  gte="10"
  positive
  required>
</input-number>