<input class="input" type="email" placeholder="Email">Usage
Simply add the input class to your <input> element or have a parent with the form class (read more about form). You can also set the aria-invalid attribute to true to make the input invalid.
<input class="input" type="email" placeholder="Email">Examples
<input class="input" type="email" placeholder="Email">Invalid
<input class="input" type="email" placeholder="Email" aria-invalid="true">Disabled
<input class="input" type="email" placeholder="Email" disabled>With label
<div class="grid gap-3">
<label for="input-with-label" class="label">Label</label>
<input class="input" id="input-with-label" type="email" placeholder="Email">
</div>With text
Fill in your email address.
<div class="grid gap-3">
<label for="input-with-text" class="label">Label</label>
<input class="input" id="input-with-text" type="email" placeholder="Email">
<p class="text-muted-foreground text-sm">Fill in your email address.</p>
</div>With button
<div class="flex items-center space-x-2">
<input class="input" type="email" placeholder="Email">
<button type="submit" class="btn">Submit</button>
</div>Form
<form class="form space-y-6 w-full">
<div class="grid gap-3">
<label for="input-form" class="label">Username</label>
<input class="input" id="input-form" type="text" placeholder="hunvreus">
<p class="text-muted-foreground text-sm">This is your public display name.</p>
</div>
<button type="submit" class="btn">Submit</button>
</form>