Components / Forms

Input

A complete field contract that keeps labels, guidance, validation, and adornments connected to a native input.

Available in @kape/react

A field, not just a box

Labels and supporting messages remain part of the component's observable contract.

Workspace name

Shown in navigation and shared links.

Repository

Email address

We will send one project update.

Disabled field

Installation and usage

Input accepts native input attributes, so uncontrolled fields and controlled React state both work.

import { Input } from "@kape/react";
import "@kape/react/styles.css";

<Input
  label="Email address"
  description="Used for project updates."
  name="email"
  type="email"
/>

Props

Prop	Type	Required	Purpose
`label`	ReactNode	Yes	Accessible label for the native input
`description`	ReactNode	No	Persistent guidance linked with `aria-describedby`
`error`	ReactNode	No	Live validation feedback and invalid state
`prefix / suffix`	ReactNode	No	Decorative context around the editable value
`size`	sm \| md \| lg	No	Control height and density
`hideLabel`	boolean	No	Visually hides, but preserves, the label

Accessibility

A label is required and linked to the generated or consumer-provided ID.
Description and error IDs merge with consumer aria-describedby.
Errors set aria-invalid and use a live alert.
Prefix and suffix content is decorative; include meaningful units in the label.

Keyboard

Tab: Moves focus to the native input.
Platform keys: Editing, selection, and undo remain native.

Composition and limitations

Input deliberately owns a single native input. It does not provide masking, token entry, or combobox behavior. For currency and measurement fields, put the unit in the visible label even when a decorative suffix is present.

Source Tests