Text Field
Text field.
Try it
Knobs
variant size <script> import { Input } from 'omaris';</script><Input label="Email" placeholder="you@example.com" />Walkthrough
1. Basic
A label, a field and a helper line — the shape every field in a settings form takes. Nothing moves when the field is filled.
<script lang="ts"> import { Input } from 'omaris'; let email = $state('');</script><Input class="w-80 max-w-full" label="Work email" type="email" placeholder="you@example.com" supportingText="We only use this for billing." bind:value={email}/>2. Variants
outline on the page background, filled for a softer well, ghost inside another surface.
<script lang="ts"> import { Input } from 'omaris';</script><Input class="w-64 max-w-full" variant="outline" label="Outline" placeholder="The default" /><Input class="w-64 max-w-full" variant="filled" label="Filled" placeholder="A tinted well" /><Input class="w-64 max-w-full" variant="ghost" label="Ghost" placeholder="No frame until you touch it"/>3. Sizes
Three heights, and the label and helper text scale with the field. sm for a dense filter row, lg for a sign-in screen.
<script lang="ts"> import { Input } from 'omaris';</script><Input class="w-56 max-w-full" size="sm" label="Small" placeholder="sm" /><Input class="w-56 max-w-full" label="Default" placeholder="default" /><Input class="w-56 max-w-full" size="lg" label="Large" placeholder="lg" />4. Icons and affixes
start and end take icons. prefix and suffix are flat text glued to the value — they are not part of it, so the value stays clean.
<script lang="ts"> import { Input } from 'omaris'; let site = $state(''); let weight = $state('');</script><Input class="w-72 max-w-full" label="Search" placeholder="Find an order"> {#snippet start()} ... {/snippet}</Input><Input class="w-72 max-w-full" label="Website" prefix="https://" placeholder="example.com" bind:value={site}/><Input class="w-40 max-w-full" label="Weight" suffix="kg" bind:value={weight} />5. Password and clear
A password field gets the eye toggle by default — that is what every password field wants and nobody wants to rebuild. clearable adds the ×.
<script lang="ts"> import { Input } from 'omaris'; let password = $state('hunter2'); let query = $state('Baghdad');</script><Input class="w-72 max-w-full" type="password" label="Password" bind:value={password} /><Input class="w-72 max-w-full" label="Search" clearable bind:value={query} />6. States
The supporting text turns into the error text when the field is invalid, so the reason sits where the person is already looking.
<script lang="ts"> import { Input } from 'omaris';</script><Input class="w-64 max-w-full" label="Required" required placeholder="Has to be filled in" /><Input class="w-64 max-w-full" label="Invalid" invalid value="not-an-email" supportingText="That is not an email address."/><Input class="w-64 max-w-full" label="Disabled" disabled value="Read only" /><Input class="w-64 max-w-full" label="Loading" loading value="Checking…" />7. Counter
counter needs a maxlength to count against — for a headline or a bio with a hard limit the person should see coming.
<script lang="ts"> import { Input } from 'omaris'; let bio = $state('Ships dashboards.');</script><Input class="w-80 max-w-full" label="Headline" counter maxlength={60} supportingText="Shown under your name." bind:value={bio}/>8. Formats
A format gets first refusal on every keystroke, so rejected characters never make it in and the keyboard hints come along with it.
<script lang="ts"> import { Input } from 'omaris'; let slug = $state(''); let amount = $state(''); let handle = $state(''); let code = $state('');</script><Input class="w-56 max-w-full" label="Slug" format="slug" placeholder="my-first-post" bind:value={slug}/><Input class="w-56 max-w-full" label="Amount" format="decimal" placeholder="0.00" bind:value={amount}/><Input class="w-56 max-w-full" label="Handle" format="handle" placeholder="omerchetin" bind:value={handle}/><Input class="w-56 max-w-full" label="Code" format="code" placeholder="A1B2C3" bind:value={code} />9. Overridden
Every part is reachable by name. class still covers the root.
<script lang="ts"> import { Input } from 'omaris';</script><Input class="w-80 max-w-full" label="Reading" value="42.0000" supportingText="Monospace digits, italic help" classes={{ control: 'font-mono tabular-nums', support: 'italic', label: 'uppercase tracking-wide' }}/>