Input
A text input component for forms and user data entry with built-in styling and accessibility features.
<input class="input" type="email" placeholder="Email">Usage
Add the input class to supported <input> elements. Inputs inside a form or field container also receive the same styling automatically for common text-like input types.
Use native HTML attributes for behavior: disabled for disabled inputs, required for required fields, and aria-invalid="true" for invalid state styling.
<input class="input" type="email" placeholder="Email">Examples
Basic
<input class="input" type="email" placeholder="Email">Field
Use field with a label and description to create an accessible field.
Enter your email address.
<div role="group" class="field w-full max-w-xs">
<label for="input-field">Email</label>
<input id="input-field" type="email" placeholder="m@example.com">
<p>Enter your email address.</p>
</div>Field Group
<div class="grid w-full max-w-xs gap-4">
<div role="group" class="field">
<label for="input-first-name">First name</label>
<input id="input-first-name" type="text" placeholder="Jane">
</div>
<div role="group" class="field">
<label for="input-last-name">Last name</label>
<input id="input-last-name" type="text" placeholder="Doe">
</div>
</div>Disabled
<input class="input" type="email" placeholder="Email" disabled>Invalid
Please enter a valid email address.
<div role="group" class="field w-full max-w-xs">
<label for="input-invalid">Email</label>
<input class="input" id="input-invalid" type="email" placeholder="Email" aria-invalid="true">
<p>Please enter a valid email address.</p>
</div>File
<input class="input" type="file">Inline
<div class="flex w-full max-w-xs items-center gap-2">
<input class="input" type="search" placeholder="Search...">
<button type="submit" class="btn">Search</button>
</div>Grid
<div class="grid w-full gap-4 md:grid-cols-2">
<input class="input" type="text" placeholder="First name">
<input class="input" type="text" placeholder="Last name">
<input class="input md:col-span-2" type="email" placeholder="Email">
</div>Required
<div role="group" class="field w-full max-w-xs">
<label for="input-required">Username <span class="text-destructive">*</span></label>
<input id="input-required" type="text" placeholder="hunvreus" required>
</div>Badge
<div role="group" class="field w-full max-w-xs">
<label for="input-badge" class="flex items-center gap-2">
Email
<span class="badge-secondary">Recommended</span>
</label>
<input id="input-badge" type="email" placeholder="m@example.com">
</div>Input Group
Use the Input Group patterns to add icons, text, or buttons inside an input.
<div class="relative w-full max-w-xs">
<input class="input ps-9" type="search" placeholder="Search...">
<div class="pointer-events-none absolute start-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
</div>
</div>Button Group
Use Button Group when an input should be grouped with adjacent buttons.
<div role="group" aria-label="Search" class="button-group w-full max-w-xs">
<input class="input" type="search" placeholder="Search...">
<button type="submit" class="btn-icon-outline" aria-label="Search">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
</button>
</div>Form
<form class="w-full max-w-sm space-y-6">
<div role="group" class="field">
<label for="input-form-username">Username</label>
<input id="input-form-username" type="text" placeholder="hunvreus" required>
<p>This is your public display name.</p>
</div>
<div role="group" class="field">
<label for="input-form-email">Email</label>
<input id="input-form-email" type="email" placeholder="m@example.com" required>
</div>
<button type="submit" class="btn">Submit</button>
</form>RTL
Inputs support right-to-left layouts through native browser direction handling. Add dir="rtl" to the input, field, or an ancestor.
مفتاح API الخاص بك مشفر ومخزن بأمان.
<div role="group" class="field w-full max-w-xs" dir="rtl">
<label for="input-rtl-api-key">مفتاح API</label>
<input id="input-rtl-api-key" type="password" placeholder="sk-...">
<p>مفتاح API الخاص بك مشفر ومخزن بأمان.</p>
</div>