Input

An input lets people type a short value, like an amount, an address or a project name.

Stableinput.tsxFigma

Amount

USDC

You have 4,820 USDC

Size

SmallMediumLarge

Slot

NoneTokenSearch icon

Field

HelperErrorOptional

State

Disabled

JSX

<Field label="Amount" helper="You have 4,820 USDC">
  <Input inputMode="decimal" placeholder="0.00" end={<InputTokenSuffix symbol="USDC" logoUrl={usdcLogo} />} />
</Field>

When to use

• To enter a value that people type, like a bid amount, a wallet address, a name or a URL.
• To filter a list or a table by text.

When not to use

• For text longer than a line, like a description, use a text area.
• To pick one value from a known list, like a chain or a token, use a select.
• To turn a setting on or off, use a switch.

Anatomy

Amount

USDC

Minimum 10 USDC

1. 1LabelSays what to enter. Always visible, above the field.
2. 2FieldWhite box with a neutral border. Sets the height and padding.
3. 3ValueWhat the person typed, or a placeholder hint.
4. 4SuffixOptionalThe unit or token the value is in. A leading icon can sit at the other end.
5. 5Helper or errorOptionalExtra guidance. An error takes its place.

Wrap an input in a Field to give it a label, a helper and an error. The field passes its id, description and error state to the input, so you don’t wire them by hand. To set your own id, pass it to Field, not the input; the label points at the field’s id.

Sizes

USDC

Small, 32px

USDC

Medium, 40px

USDC

Large, 48px

• Medium (40px) is the default, for forms.
• Small (32px) is for filters, table search and toolbars, next to small buttons.
• Large (48px) is for the main amount in a panel, like a bid or a deposit.

Inputs and buttons that sit in one row should be the same size.

Export

DoA small input next to a small button, both 32px.

Export

Don'tMixed heights in one row. Controls that sit side by side should match.

Icons and suffixes

umia.xyz/p/

USDC

start takes a leading icon, like search, or a short prefix, like a URL base. end takes a unit, a small button such as Max, or an InputTokenSuffix for token amounts. Icons size themselves to the input: 20px, 24px or 28px.

States

Try the playground to see focus. The field doesn’t change on hover, since it isn’t a button. On focus the border turns green with a soft 3px halo. Fields show focus on every click, not only from the keyboard, so the treatment hugs the field instead of using the buttons’ detached ring. The halo grows out of the border over 160ms on a steep ease-out and leaves in 100ms. With reduced motion on, it appears without growing.

Helper and error

Recipient

An address on Base

Amount

USDC

Treasury holds 48,200 USDC. Enter a smaller amount.

A helper sits below the field and says what a valid value looks like. An error replaces the helper, turns the border and focus halo red, and says how to fix the value. Check a value when people leave the field, then again as they type once it has shown an error.

Optional

Founder email (optional)

Most fields are required, so mark only the optional ones. Don’t add asterisks or “required” labels. Still pass required to Field on a required field, so screen readers announce it.

Disabled

Amount

USDC

Waiting for token decimals

A disabled input is 40% opacity and can’t be focused. Say why next to it, like a helper that explains what it’s waiting for.

Content

• Write the label as a noun, in sentence case and without a colon: Amount, Recipient, Project name.
• Use the placeholder only as a hint of the format, like 0x… or 0.00. It’s gone as soon as people type, so it never replaces the label.
• Write errors as a fix, not a fault: Enter at least 10 USDC, not Invalid amount.

Recipient

DoA visible label above, with the placeholder only as a hint.

Don'tThe placeholder as the label. It disappears as soon as people start typing.

Amounts

Use type="text" with inputMode="decimal" for money, and keep the value as a decimal string until you submit it. A number input changes the value on scroll and drops trailing zeros. Show the token with InputTokenSuffix, and show the balance in the helper or with labelEnd.

Amount

USDC

DoThe token inside the field, so the unit is never in doubt.

Amount (USDC)

Don'tA number input with the unit in the label. Spinners and scroll wheels change the value.

Behaviour

Key	Action
Tab	Moves focus to the input.
Enter	Submits the form the input is in.

Clicking the label, an icon or the suffix focuses the input. Tab skips disabled inputs.

Accessibility

• Every input needs a label. Use Field, or an aria-label when the context makes the label obvious, like a search icon in a toolbar.
• Field links the helper or error with aria-describedby and sets aria-invalid on an error, so screen readers read both.
• The resting border is a light neutral, so the label and the white fill carry the field’s edge. Keep inputs on a background that contrasts with white, or inside a card with its own border.
• Below 640px the value is 16px, so iOS Safari doesn’t zoom into the field on focus.
• Focus shows a green border and halo (border/ring); in Windows high contrast mode it falls back to an outline. Don’t remove it.

Props

Input

Prop	Type	Default	Notes
size	"sm" | "md" | "lg"	"md"	32, 40 or 48px.
start	ReactNode		A leading icon or prefix inside the field.
end	ReactNode		A unit, small button or InputTokenSuffix.
className	string		Styles the field box, like its width.
inputClassName	string		Styles the <input> inside, like text-right.

Every other <input> prop passes through to the <input>, including value, onChange, ref, inputMode and aria-invalid.

Field

Prop	Type	Default	Notes
label	ReactNode		Always visible, above the control.
helper	ReactNode		Guidance below the control.
error	ReactNode		Replaces the helper and marks the control invalid.
optional	boolean	false	Adds “(optional)” after the label.
required	boolean	false	Sets aria-required on the control. Shows nothing.
labelEnd	ReactNode		Right of the label, like a balance or a character count.
id	string	generated	The control’s id. Set a custom id here, not on the control.

InputTokenSuffix

Prop	Type	Default	Notes
symbol	string		The token symbol, like USDC.
logoUrl	string | null		The token logo. Sized to the input.

Related

• A Button sits next to an input to submit or act on its value, at the same size.
• A Dialog often holds a short form of inputs, like a withdrawal.