Text Input is a simple input field.
Class name | Type | |
---|---|---|
input | Component | For <input type="text"> tag or a wrapper of <input type="text"> tag |
input-ghost | Style | ghost style |
input-neutral | Color | neutral color |
input-primary | Color | primary color |
input-secondary | Color | secondary color |
input-accent | Color | accent color |
input-info | Color | info color |
input-success | Color | success color |
input-warning | Color | warning color |
input-error | Color | error color |
input-xs | Size | Extra small size |
input-sm | Size | Small size |
input-md | Size | Medium size [Default] |
input-lg | Size | Large size |
input-xl | Size | Extra large size |
<input type="text" placeholder="Type here" class="$$input" />
<input type="text" placeholder="Type here" class="$$input" />
<input type="text" placeholder="Type here" class="$$input" />
<input type="text" placeholder="Type here" class="$$input" />
<label class="$$input"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></g></svg> <input type="search" class="grow" placeholder="Search" /> <kbd class="$$kbd $$kbd-sm">⌘</kbd> <kbd class="$$kbd $$kbd-sm">K</kbd> </label> <label class="$$input"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path></g></svg> <input type="text" class="grow" placeholder="index.php" /> </label> <label class="$$input"> Path <input type="text" class="grow" placeholder="src/app/" /> <span class="$$badge $$badge-neutral $$badge-xs">Optional</span> </label>
<label class="$$input">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></g></svg>
<input type="search" class="grow" placeholder="Search" />
<kbd class="$$kbd $$kbd-sm">⌘</kbd>
<kbd class="$$kbd $$kbd-sm">K</kbd>
</label>
<label class="$$input">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path></g></svg>
<input type="text" class="grow" placeholder="index.php" />
</label>
<label class="$$input">
Path
<input type="text" class="grow" placeholder="src/app/" />
<span class="$$badge $$badge-neutral $$badge-xs">Optional</span>
</label>
<label class="$$input"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></g></svg> <input type="search" class="grow" placeholder="Search" /> <kbd class="$$kbd $$kbd-sm">⌘</kbd> <kbd class="$$kbd $$kbd-sm">K</kbd> </label> <label class="$$input"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path></g></svg> <input type="text" class="grow" placeholder="index.php" /> </label> <label class="$$input"> Path <input type="text" class="grow" placeholder="src/app/" /> <span class="$$badge $$badge-neutral $$badge-xs">Optional</span> </label>
<label class="$$input">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></g></svg>
<input type="search" class="grow" placeholder="Search" />
<kbd class="$$kbd $$kbd-sm">⌘</kbd>
<kbd class="$$kbd $$kbd-sm">K</kbd>
</label>
<label class="$$input">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path></g></svg>
<input type="text" class="grow" placeholder="index.php" />
</label>
<label class="$$input">
Path
<input type="text" class="grow" placeholder="src/app/" />
<span class="$$badge $$badge-neutral $$badge-xs">Optional</span>
</label>
<input type="text" placeholder="Type here" class="$$input $$input-ghost" />
<input type="text" placeholder="Type here" class="$$input $$input-ghost" />
<input type="text" placeholder="Type here" class="$$input $$input-ghost" />
<input type="text" placeholder="Type here" class="$$input $$input-ghost" />
<fieldset class="$$fieldset"> <legend class="$$fieldset-legend">What is your name?</legend> <input type="text" class="$$input" placeholder="Type here" /> <p class="$$fieldset-label">Optional</p> </fieldset>
<fieldset class="$$fieldset">
<legend class="$$fieldset-legend">What is your name?</legend>
<input type="text" class="$$input" placeholder="Type here" />
<p class="$$fieldset-label">Optional</p>
</fieldset>
<fieldset class="$$fieldset"> <legend class="$$fieldset-legend">What is your name?</legend> <input type="text" class="$$input" placeholder="Type here" /> <p class="$$fieldset-label">Optional</p> </fieldset>
<fieldset class="$$fieldset">
<legend class="$$fieldset-legend">What is your name?</legend>
<input type="text" class="$$input" placeholder="Type here" />
<p class="$$fieldset-label">Optional</p>
</fieldset>
<input type="text" placeholder="neutral" class="$$input $$input-neutral" /> <input type="text" placeholder="Primary" class="$$input $$input-primary" /> <input type="text" placeholder="Secondary" class="$$input $$input-secondary" /> <input type="text" placeholder="Accent" class="$$input $$input-accent" /> <input type="text" placeholder="Info" class="$$input $$input-info" /> <input type="text" placeholder="Success" class="$$input $$input-success" /> <input type="text" placeholder="Warning" class="$$input $$input-warning" /> <input type="text" placeholder="Error" class="$$input $$input-error" />
<input type="text" placeholder="neutral" class="$$input $$input-neutral" />
<input type="text" placeholder="Primary" class="$$input $$input-primary" />
<input type="text" placeholder="Secondary" class="$$input $$input-secondary" />
<input type="text" placeholder="Accent" class="$$input $$input-accent" />
<input type="text" placeholder="Info" class="$$input $$input-info" />
<input type="text" placeholder="Success" class="$$input $$input-success" />
<input type="text" placeholder="Warning" class="$$input $$input-warning" />
<input type="text" placeholder="Error" class="$$input $$input-error" />
<input type="text" placeholder="neutral" class="$$input $$input-neutral" /> <input type="text" placeholder="Primary" class="$$input $$input-primary" /> <input type="text" placeholder="Secondary" class="$$input $$input-secondary" /> <input type="text" placeholder="Accent" class="$$input $$input-accent" /> <input type="text" placeholder="Info" class="$$input $$input-info" /> <input type="text" placeholder="Success" class="$$input $$input-success" /> <input type="text" placeholder="Warning" class="$$input $$input-warning" /> <input type="text" placeholder="Error" class="$$input $$input-error" />
<input type="text" placeholder="neutral" class="$$input $$input-neutral" />
<input type="text" placeholder="Primary" class="$$input $$input-primary" />
<input type="text" placeholder="Secondary" class="$$input $$input-secondary" />
<input type="text" placeholder="Accent" class="$$input $$input-accent" />
<input type="text" placeholder="Info" class="$$input $$input-info" />
<input type="text" placeholder="Success" class="$$input $$input-success" />
<input type="text" placeholder="Warning" class="$$input $$input-warning" />
<input type="text" placeholder="Error" class="$$input $$input-error" />
<input type="text" placeholder="Xsmall" class="$$input $$input-xs" /> <input type="text" placeholder="Small" class="$$input $$input-sm" /> <input type="text" placeholder="Medium" class="$$input $$input-md" /> <input type="text" placeholder="Large" class="$$input $$input-lg" /> <input type="text" placeholder="Xlarge" class="$$input $$input-xl" />
<input type="text" placeholder="Xsmall" class="$$input $$input-xs" />
<input type="text" placeholder="Small" class="$$input $$input-sm" />
<input type="text" placeholder="Medium" class="$$input $$input-md" />
<input type="text" placeholder="Large" class="$$input $$input-lg" />
<input type="text" placeholder="Xlarge" class="$$input $$input-xl" />
<input type="text" placeholder="Xsmall" class="$$input $$input-xs" /> <input type="text" placeholder="Small" class="$$input $$input-sm" /> <input type="text" placeholder="Medium" class="$$input $$input-md" /> <input type="text" placeholder="Large" class="$$input $$input-lg" /> <input type="text" placeholder="Xlarge" class="$$input $$input-xl" />
<input type="text" placeholder="Xsmall" class="$$input $$input-xs" />
<input type="text" placeholder="Small" class="$$input $$input-sm" />
<input type="text" placeholder="Medium" class="$$input $$input-md" />
<input type="text" placeholder="Large" class="$$input $$input-lg" />
<input type="text" placeholder="Xlarge" class="$$input $$input-xl" />
<input type="text" placeholder="You can't touch this" class="$$input" disabled />
<input type="text" placeholder="You can't touch this" class="$$input" disabled />
<input type="text" placeholder="You can't touch this" class="$$input" disabled />
<input type="text" placeholder="You can't touch this" class="$$input" disabled />
input
class can be used for any input field type. Including text
, password
, email
, number
, date
, datetime-local
, week
, month
, tel
, url
, search
, time
For checkbox
, radio
, file
, range
use their own class names, as they are not visually input fields.
Inputs can be used with validator
class to have validation styles. See Validator component for more details.
<input type="text" class="$$input" placeholder="Which browser do you use" list="browsers"/> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> <option value="Opera"> <option value="Edge"> </datalist>
<input type="text" class="$$input" placeholder="Which browser do you use" list="browsers"/>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Opera">
<option value="Edge">
</datalist>
<input type="text" class="$$input" placeholder="Which browser do you use" list="browsers"/> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> <option value="Opera"> <option value="Edge"> </datalist>
<input type="text" class="$$input" placeholder="Which browser do you use" list="browsers"/>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Opera">
<option value="Edge">
</datalist>
<input type="date" class="$$input"/>
<input type="date" class="$$input"/>
<input type="date" class="$$input"/>
<input type="date" class="$$input"/>
<input type="time" class="$$input"/>
<input type="time" class="$$input"/>
<input type="time" class="$$input"/>
<input type="time" class="$$input"/>
<input type="datetime-local" class="$$input"/>
<input type="datetime-local" class="$$input"/>
<input type="datetime-local" class="$$input"/>
<input type="datetime-local" class="$$input"/>
<label class="$$input $$validator"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg> <input type="input" required placeholder="Username" pattern="[A-Za-z][A-Za-z0-9\-]*" minlength="3" maxlength="30" title="Only letters, numbers or dash" /> </label> <p class="$$validator-hint"> Must be 3 to 30 characters <br/>containing only letters, numbers or dash </p>
<label class="$$input $$validator">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg>
<input type="input" required placeholder="Username" pattern="[A-Za-z][A-Za-z0-9\-]*" minlength="3" maxlength="30" title="Only letters, numbers or dash" />
</label>
<p class="$$validator-hint">
Must be 3 to 30 characters
<br/>containing only letters, numbers or dash
</p>
<label class="$$input $$validator"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg> <input type="input" required placeholder="Username" pattern="[A-Za-z][A-Za-z0-9\-]*" minlength="3" maxlength="30" title="Only letters, numbers or dash" /> </label> <p class="$$validator-hint"> Must be 3 to 30 characters <br/>containing only letters, numbers or dash </p>
<label class="$$input $$validator">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg>
<input type="input" required placeholder="Username" pattern="[A-Za-z][A-Za-z0-9\-]*" minlength="3" maxlength="30" title="Only letters, numbers or dash" />
</label>
<p class="$$validator-hint">
Must be 3 to 30 characters
<br/>containing only letters, numbers or dash
</p>
<label class="$$input"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></g></svg> <input type="search" required placeholder="Search"/> </label>
<label class="$$input">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></g></svg>
<input type="search" required placeholder="Search"/>
</label>
<label class="$$input"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></g></svg> <input type="search" required placeholder="Search"/> </label>
<label class="$$input">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></g></svg>
<input type="search" required placeholder="Search"/>
</label>
<label class="$$input $$validator"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></g></svg> <input type="email" placeholder="mail@site.com" required/> </label> <div class="$$validator-hint hidden">Enter valid email address</div>
<label class="$$input $$validator">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></g></svg>
<input type="email" placeholder="mail@site.com" required/>
</label>
<div class="$$validator-hint hidden">Enter valid email address</div>
<label class="$$input $$validator"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></g></svg> <input type="email" placeholder="mail@site.com" required/> </label> <div class="$$validator-hint hidden">Enter valid email address</div>
<label class="$$input $$validator">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></g></svg>
<input type="email" placeholder="mail@site.com" required/>
</label>
<div class="$$validator-hint hidden">Enter valid email address</div>
<div class="$$join"> <div> <label class="$$input $$validator $$join-item"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></g></svg> <input type="email" placeholder="mail@site.com" required/> </label> <div class="$$validator-hint hidden">Enter valid email address</div> </div> <button class="$$btn $$btn-neutral $$join-item">Join</button> </div>
<div class="$$join">
<div>
<label class="$$input $$validator $$join-item">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></g></svg>
<input type="email" placeholder="mail@site.com" required/>
</label>
<div class="$$validator-hint hidden">Enter valid email address</div>
</div>
<button class="$$btn $$btn-neutral $$join-item">Join</button>
</div>
<div class="$$join"> <div> <label class="$$input $$validator $$join-item"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></g></svg> <input type="email" placeholder="mail@site.com" required/> </label> <div class="$$validator-hint hidden">Enter valid email address</div> </div> <button class="$$btn $$btn-neutral $$join-item">Join</button> </div>
<div class="$$join">
<div>
<label class="$$input $$validator $$join-item">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></g></svg>
<input type="email" placeholder="mail@site.com" required/>
</label>
<div class="$$validator-hint hidden">Enter valid email address</div>
</div>
<button class="$$btn $$btn-neutral $$join-item">Join</button>
</div>
<label class="$$input $$validator"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></g></svg> <input type="password" required placeholder="Password" minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must be more than 8 characters, including number, lowercase letter, uppercase letter" /> </label> <p class="$$validator-hint hidden"> Must be more than 8 characters, including <br/>At least one number <br/>At least one lowercase letter <br/>At least one uppercase letter </p>
<label class="$$input $$validator">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></g></svg>
<input type="password" required placeholder="Password" minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must be more than 8 characters, including number, lowercase letter, uppercase letter" />
</label>
<p class="$$validator-hint hidden">
Must be more than 8 characters, including
<br/>At least one number
<br/>At least one lowercase letter
<br/>At least one uppercase letter
</p>
<label class="$$input $$validator"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></g></svg> <input type="password" required placeholder="Password" minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must be more than 8 characters, including number, lowercase letter, uppercase letter" /> </label> <p class="$$validator-hint hidden"> Must be more than 8 characters, including <br/>At least one number <br/>At least one lowercase letter <br/>At least one uppercase letter </p>
<label class="$$input $$validator">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></g></svg>
<input type="password" required placeholder="Password" minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must be more than 8 characters, including number, lowercase letter, uppercase letter" />
</label>
<p class="$$validator-hint hidden">
Must be more than 8 characters, including
<br/>At least one number
<br/>At least one lowercase letter
<br/>At least one uppercase letter
</p>
<input type="number" class="$$input $$validator" required placeholder="Type a number between 1 to 10" min="1" max="10" title="Must be between be 1 to 10" /> <p class="$$validator-hint">Must be between be 1 to 10</p>
<input type="number" class="$$input $$validator" required placeholder="Type a number between 1 to 10"
min="1" max="10" title="Must be between be 1 to 10" />
<p class="$$validator-hint">Must be between be 1 to 10</p>
<input type="number" class="$$input $$validator" required placeholder="Type a number between 1 to 10" min="1" max="10" title="Must be between be 1 to 10" /> <p class="$$validator-hint">Must be between be 1 to 10</p>
<input type="number" class="$$input $$validator" required placeholder="Type a number between 1 to 10"
min="1" max="10" title="Must be between be 1 to 10" />
<p class="$$validator-hint">Must be between be 1 to 10</p>
<label class="$$input $$validator"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="none"><path d="M7.25 11.5C6.83579 11.5 6.5 11.8358 6.5 12.25C6.5 12.6642 6.83579 13 7.25 13H8.75C9.16421 13 9.5 12.6642 9.5 12.25C9.5 11.8358 9.16421 11.5 8.75 11.5H7.25Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6 1C4.61929 1 3.5 2.11929 3.5 3.5V12.5C3.5 13.8807 4.61929 15 6 15H10C11.3807 15 12.5 13.8807 12.5 12.5V3.5C12.5 2.11929 11.3807 1 10 1H6ZM10 2.5H9.5V3C9.5 3.27614 9.27614 3.5 9 3.5H7C6.72386 3.5 6.5 3.27614 6.5 3V2.5H6C5.44771 2.5 5 2.94772 5 3.5V12.5C5 13.0523 5.44772 13.5 6 13.5H10C10.5523 13.5 11 13.0523 11 12.5V3.5C11 2.94772 10.5523 2.5 10 2.5Z" fill="currentColor"></path></g></svg> <input type="tel" class="tabular-nums" required placeholder="Phone" pattern="[0-9]*" minlength="10" maxlength="10" title="Must be 10 digits" /> </label> <p class="$$validator-hint">Must be 10 digits</p>
<label class="$$input $$validator">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="none"><path d="M7.25 11.5C6.83579 11.5 6.5 11.8358 6.5 12.25C6.5 12.6642 6.83579 13 7.25 13H8.75C9.16421 13 9.5 12.6642 9.5 12.25C9.5 11.8358 9.16421 11.5 8.75 11.5H7.25Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6 1C4.61929 1 3.5 2.11929 3.5 3.5V12.5C3.5 13.8807 4.61929 15 6 15H10C11.3807 15 12.5 13.8807 12.5 12.5V3.5C12.5 2.11929 11.3807 1 10 1H6ZM10 2.5H9.5V3C9.5 3.27614 9.27614 3.5 9 3.5H7C6.72386 3.5 6.5 3.27614 6.5 3V2.5H6C5.44771 2.5 5 2.94772 5 3.5V12.5C5 13.0523 5.44772 13.5 6 13.5H10C10.5523 13.5 11 13.0523 11 12.5V3.5C11 2.94772 10.5523 2.5 10 2.5Z" fill="currentColor"></path></g></svg>
<input type="tel" class="tabular-nums" required placeholder="Phone" pattern="[0-9]*" minlength="10" maxlength="10" title="Must be 10 digits" />
</label>
<p class="$$validator-hint">Must be 10 digits</p>
<label class="$$input $$validator"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="none"><path d="M7.25 11.5C6.83579 11.5 6.5 11.8358 6.5 12.25C6.5 12.6642 6.83579 13 7.25 13H8.75C9.16421 13 9.5 12.6642 9.5 12.25C9.5 11.8358 9.16421 11.5 8.75 11.5H7.25Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6 1C4.61929 1 3.5 2.11929 3.5 3.5V12.5C3.5 13.8807 4.61929 15 6 15H10C11.3807 15 12.5 13.8807 12.5 12.5V3.5C12.5 2.11929 11.3807 1 10 1H6ZM10 2.5H9.5V3C9.5 3.27614 9.27614 3.5 9 3.5H7C6.72386 3.5 6.5 3.27614 6.5 3V2.5H6C5.44771 2.5 5 2.94772 5 3.5V12.5C5 13.0523 5.44772 13.5 6 13.5H10C10.5523 13.5 11 13.0523 11 12.5V3.5C11 2.94772 10.5523 2.5 10 2.5Z" fill="currentColor"></path></g></svg> <input type="tel" class="tabular-nums" required placeholder="Phone" pattern="[0-9]*" minlength="10" maxlength="10" title="Must be 10 digits" /> </label> <p class="$$validator-hint">Must be 10 digits</p>
<label class="$$input $$validator">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="none"><path d="M7.25 11.5C6.83579 11.5 6.5 11.8358 6.5 12.25C6.5 12.6642 6.83579 13 7.25 13H8.75C9.16421 13 9.5 12.6642 9.5 12.25C9.5 11.8358 9.16421 11.5 8.75 11.5H7.25Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6 1C4.61929 1 3.5 2.11929 3.5 3.5V12.5C3.5 13.8807 4.61929 15 6 15H10C11.3807 15 12.5 13.8807 12.5 12.5V3.5C12.5 2.11929 11.3807 1 10 1H6ZM10 2.5H9.5V3C9.5 3.27614 9.27614 3.5 9 3.5H7C6.72386 3.5 6.5 3.27614 6.5 3V2.5H6C5.44771 2.5 5 2.94772 5 3.5V12.5C5 13.0523 5.44772 13.5 6 13.5H10C10.5523 13.5 11 13.0523 11 12.5V3.5C11 2.94772 10.5523 2.5 10 2.5Z" fill="currentColor"></path></g></svg>
<input type="tel" class="tabular-nums" required placeholder="Phone" pattern="[0-9]*" minlength="10" maxlength="10" title="Must be 10 digits" />
</label>
<p class="$$validator-hint">Must be 10 digits</p>
<label class="$$input $$validator"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></g></svg> <input type="url" required placeholder="https://" value="https://" pattern="^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9\-].*[a-zA-Z0-9])?\.)+[a-zA-Z].*$" title="Must be valid URL" /> </label> <p class="$$validator-hint">Must be valid URL</p>
<label class="$$input $$validator">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></g></svg>
<input type="url" required placeholder="https://" value="https://" pattern="^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9\-].*[a-zA-Z0-9])?\.)+[a-zA-Z].*$" title="Must be valid URL" />
</label>
<p class="$$validator-hint">Must be valid URL</p>
<label class="$$input $$validator"> <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></g></svg> <input type="url" required placeholder="https://" value="https://" pattern="^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9\-].*[a-zA-Z0-9])?\.)+[a-zA-Z].*$" title="Must be valid URL" /> </label> <p class="$$validator-hint">Must be valid URL</p>
<label class="$$input $$validator">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></g></svg>
<input type="url" required placeholder="https://" value="https://" pattern="^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9\-].*[a-zA-Z0-9])?\.)+[a-zA-Z].*$" title="Must be valid URL" />
</label>
<p class="$$validator-hint">Must be valid URL</p>