Components

Input

Single-line text field on Base UI's input primitive. Pair with Label for anything not obvious from context; use aria-invalid for validation state.

When to usefor any single-line text entry — names, IDs, search, URLs. Reach for Textarea when it needs to breathe.

Import

import { Input } from "@ravnhq/efni/input"

Default

<Input placeholder="Mission title" />

With label

Mission ID

<Label htmlFor="mission-id">Mission ID</Label>
<Input id="mission-id" placeholder="MB-4472" />

With icon

<div className="relative">
  <Icon icon={Search} size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
  <Input placeholder="Search missions" className="pl-8" />
</div>

Invalid

Burn rate

<Input aria-invalid defaultValue="not-a-number" />

Disabled

Do & don't

Mission ID

Pair the input with a persistent label — placeholders disappear the moment you start typing.

Don't rely on a placeholder as the only label — it fails screen readers and short-term memory alike.

Accessibility

Key	Action
`Tab`	Move focus into and out of the field.
`Enter`	Submit the surrounding form.

Renders a native <input> — semantics, spellcheck, and browser autofill come for free.
Use aria-invalid for validation state (pairs with the Form component's FormMessage).
Never remove focus styles — the ring is how keyboard users navigate.

Guidelines

Always pair with a Label via htmlFor for anything non-obvious.
Match the type attribute to the data (email, tel, number, date).
Use inputMode to hint touch keyboards for numeric fields.

Don't

Don't stack multiple inputs without labels — even in a tight table.
Don't use a plain Input for currency / dates — pair with an appropriate type or picker.
Don't hide the disabled state behind subtle color — it must read as inactive.

Props

Prop	Type	Default	Description
`…props`	`React.ComponentProps<"input">`	—	Everything Input passes to the element it renders.
`type`	`string`	`"text"`	Native input type — text, email, password, number, date, etc.
`aria-invalid`	`boolean`	—	Renders the destructive border/ring. Pair with Form's FormMessage.
`disabled`	`boolean`	—	Locks the field and dims it.