Input
A single-line text field. It is the most-used control in most products, so its resting, hover, focus and error states set the tone for every other form control.
Added in v1.0.0 · import from "@borneo/react"
Interactive previewPermalink to this section
Inputs are always rendered with a visible label. The preview shows the field alone so the states are easy to compare.
<Input
variant="default"
size="md"
shape="default"
placeholder="name@company.com"
/>AnatomyPermalink to this section
Variants and shapesPermalink to this section
Variant controls the token-driven surface treatment; shape controls only the radius. They can be combined independently.
SizesPermalink to this section
Match the field height to the buttons it sits beside — a 44px input next to a 52px button reads as a mistake.
StatesPermalink to this section
Error and success are never signalled by border colour alone — each is paired with a message and an icon.
Default
Hover
Border darkens
Focus visible
Brand border plus ring
Filled
Error
aria-invalid + message
Success
Disabled
Not focusable
Read-only
Focusable, not editable
Live validationPermalink to this section
Type an incomplete address to see the error state and its message appear together.
We use this for sign-in and billing receipts.
Enter a complete email address, like ana@borneo.design.