Input | Lime design system

Examples

Name a goal

An amount

Amount

Up to $1,000 a day.

When to use it

8 rules

Must: Wrap an input that collects a value in Field with a FieldLabel. Because a placeholder disappears on the first keystroke and gives the input no accessible name.
Must: Say what is wrong in a FieldError; never only turn the border red. Because a red edge tells a color-blind person and a screen reader nothing about the fix.
Must: Set type, inputMode and autoComplete for an email, link or number. Because Input defaults to type="text", so the phone shows the letter keyboard and autofill skips it.
Should: Make the placeholder an example answer, never the label.
Must: Pass aria-label when the input has no visible label. Because without it a screen reader announces an unnamed edit text.
Never: Build a floating or inside label; the label sits above in sentence case. Because a label inside the 40px field overlaps the typed value and loses the Field wiring.
Never: Set text-xs on an input; the size prop sets the type. Because base.css lifts touch fields back to 16px against iOS zoom, so the field renders two sizes.
Should: Use size="lg" (48px) in a phone form.

4 checks

: Name the input from FieldLabel or aria-label; a placeholder is not a name.
: Focus shows a 2px olive outline; invalid keeps the red border under it.
: FieldError carries the message; forced colors flattens the red border.
: Text on the field is 17.6:1; the edge is a 1px hairline, so the ring carries the shape.

7 edge cases

Long value: Scrolls inside the input and never wraps.
Narrow container: min-w-0 lets it shrink in a flex row.
Right to left: Text aligns to the right; set dir="ltr" on a link or email field.
Zoom 200%: The value grows inside the fixed height.
Waiting on a server check: No pending state; put the wait message in Field.
Inside a form: Enter submits through the default button.
Forced colors: The border stays a system color; the focus outline survives.

4 props

15 tokens