Text Field
Styled text field for single-line user input.
Selectors
input- Auto-styled text input within .cider scope. Includes hover, focus ring, disabled, and error states.
Default
<input type="text" placeholder="Enter text..." />With Label
<label for="email-input">Email</label>
<input id="email-input" type="email" placeholder="you@example.com" />
<small>We'll never share your email.</small>Required
<label for="email-req">Email</label>
<input id="email-req" type="email" placeholder="you@example.com" required />
A red * is added automatically when the input has required.
Optional Hint
<label for="company-input">Company name <small>(optional)</small></label>
<input id="company-input" type="text" placeholder="Acme Inc." />Error State
<label for="username-err">Username</label>
<input id="username-err" type="text" value="ab" aria-invalid="true" aria-describedby="username-err-msg" />
<small id="username-err-msg">Username must be at least 3 characters.</small>
Add aria-invalid="true" to turn the helper text red automatically.
With Icon
<div class="relative">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-tertiary-foreground pointer-events-none" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
<input type="text" class="pl-9" placeholder="Search..." />
</div>Disabled
<input type="text" placeholder="Enter text..." disabled />