Forms

Input

A text input. Native by design: no wrapper element, so `type`, `pattern`, `autoComplete`, form validation and the browser's own UI all keep working.

Server safeSource

Import

import { Input } from '@the_viveksingh/vivek-ui'

Sizes

<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />

Native types keep working

There is no wrapper element, so type, autoComplete, min, max, pattern and the browser validation UI all behave exactly as they do on a bare input.

<Input type="search" placeholder="Search components" />
<Input type="number" defaultValue={12} min={1} max={99} />
<Input type="date" defaultValue="2026-08-21" />
<Input disabled defaultValue="Disabled" />

Inside a Field

Field generates the id, wires the label, and points aria-describedby at the help text or aria-errormessage at the error. Do that by hand and one of the four eventually drifts.

We only use this for billing receipts.

<Field label="Work email" help="We only use this for billing receipts.">
  <Input type="email" placeholder="you@company.com" />
</Field>

<Field label="Subdomain" error="That subdomain is already taken.">
  <Input invalid defaultValue="acme" />
</Field>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Input
PropTypeDefaultDescription
size'sm' | 'md' | 'lg'——
invalidboolean—Marks the field invalid and sets `aria-invalid`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Input carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.