revido kit
Start building
← All components
forms / stable

Input

Single-line native text input: 32px, 6px radius, cobalt focus halo. TextField wraps it with label and validation.

LIVE PREVIEW
Loading preview…

When to use

  • New forms: TextField (label, description, error wired by React Aria).
  • Existing react-hook-form / native forms: bare Input + Label with `htmlFor`.

Consider an alternative

  • Numbers with steppers or currency — use NumberField.
  • Dates — use DatePicker.
  • Picking from a list — use Select or ComboBox.
  • Search boxes with a clear button — use SearchField.

Import

import { Input } from '@revido-llc/kit';

Keyboard interaction

  • Tab — move focus

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

childrenReactNode—
classNamestring—

Related exports

TextField

Examples

TextField

Label, description and validation in one component — the default for new forms.

<TextField label="Project name" description="Visible to the client." />
<TextField label="Email" type="email" isRequired errorMessage="Enter a valid email." />

Bare input

For existing forms: pair with Label via `htmlFor`; set `aria-invalid` for the error border.

<Label htmlFor="client">Client</Label>
<Input id="client" {...register("client")} />

States

<Input aria-invalid />
<Input disabled />

With icon

Position an icon over the padding; prefer SearchField for real search.

<div className="relative">
  <Search className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-foreground-tertiary" />
  <Input className="pl-8" placeholder="Filter tasks" aria-label="Filter tasks" />
</div>

Related components