Collect text input with a label

At a glanceCopy Anchor Link

• Who: Form builders collecting single-line text.
• What: Labelled text input with consistent styling and focus states.
• Use when: For names, emails, search boxes and other single-line values.
• Avoid when: For long text — use Textarea instead.
• See also: Collect multi-line text input, Build validated forms with labels, errors, and pending state

PreviewCopy Anchor Link

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 0.3.0 (via changesets).

ExampleCopy Anchor Link

import { Input, Label } from "@zedtech/zedkit-ui";
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="Ada" />

Wraps: @radix-ui/react-label