Input
One text field for everything a wallet asks of you. Errors shake once and explain themselves; success draws a check; addresses and amounts always switch the input to the data face so a glyph can never be misread.
States
Focus is a runtime state the field sets itself — forced here with the exact classes a focused field applies: the surface flips to a near-white spotlight and the value inverts to dark for full contrast. Error accepts a string (message + shake + red border) or a bare boolean (shake + border only).
On focus the field becomes a near-white spotlight (bg-fg) with a focus-toned border and dark value text; replicated statically via classNames.
Checksum failed — this is not a valid Bech32 address.
role=alert message; the field shakes when the error appears.
Animated check draws in the right slot.
import { Input } from "@coldharbor/ui";
<Input
label="Recipient address"
placeholder="bc1q…"
error={valid ? undefined : "Checksum failed — this is not a valid Bech32 address."}
success={valid}
/>--ch-border--ch-border-strong--ch-fg--ch-fg-muted--ch-focus--ch-danger--ch-success
Icon slots
leftIcon is decorative; rightIcon accepts an interactive element (scan, clear). success replaces the right slot with the check.
<Input
label="Recipient address"
leftIcon={<Search />}
rightIcon={
<button type="button" aria-label="Scan QR code">
<ScanLine />
</button>
}
/>--ch-border--ch-border-strong--ch-fg--ch-fg-muted--ch-focus--ch-danger--ch-success
Data entry — addresses & amounts
Anything the chain will interpret is set in the mono face via classNames.input. Amounts additionally get tabular-nums and inputMode=decimal.
type=password — never echo secrets.
Insufficient funds — spendable balance is 1.417 123 45 BTC.
<Input
label="Amount (BTC)"
inputMode="decimal"
classNames={{ input: "font-mono tabular-nums" }}
error="Insufficient funds — spendable balance is 1.417 123 45 BTC."
/>--ch-border--ch-border-strong--ch-fg--ch-fg-muted--ch-focus--ch-danger--ch-success--ch-font-family-mono
Themes
The hero state — a validated recipient address — under all three layers.
--ch-border--ch-border-strong--ch-fg--ch-fg-muted--ch-focus--ch-danger--ch-success