Input

<Inputlabel="Project name"placeholder="my-worker"description="Lowercase letters, numbers and dashes."/>

Input is pressed into the surface with an inset shadow and edged with a 1px ring. Focus thickens that ring to 1.5px and changes its colour rather than adding a second halo — one ring, two states, no layout shift.

Pass label (or description or error) and you get the full Field layout with its accessible wiring for free. Omit them and you get a bare control for a custom layout — supply aria-label in that case.

Usage

import { Input } from "@heyo-sh/heyo-ui";<Input label="Email" type="email" placeholder="you@example.com" />;

As a bare control

<Input icon={IconSearch} placeholder="Search…" aria-label="Search" /><Input prefix="https://" suffix=".heyo.sh" placeholder="acme" aria-label="Subdomain" />

icon and iconEnd sit inside the control; prefix and suffix are flush addons on its edges, on the recessed surface. An addon is part of the value ("https://"), an icon is a hint about it.

Errors

<Input label="Email" defaultValue="not-an-email" error="Enter a valid email address." /><Inputlabel="Password"type="password"minLength={8}error={{ message: "At least 8 characters", match: "tooShort" }}/>

Sizes

The four control heights: 20, 26, 32 and 40px. base is the default, and it is the height every other control in the library shares.

<Input size="xs" placeholder="xs" aria-label="xs" /><Input size="sm" placeholder="sm" aria-label="sm" /><Input size="base" placeholder="base" aria-label="base" /><Input size="lg" placeholder="lg" aria-label="lg" />

Disabled

A disabled input drops to the recessed surface, because a field you cannot type into should not look like a field you can.

<Input label="Project ID" defaultValue="prj_8f21c3d9" disabled />

Properties

Every other <input> attribute — type, value, defaultValue, onChange, required, minLength, autoComplete — is passed straight through.