Inputs

Usage and anatomy

Input is a native text field with plumeui-yt styling. Pair <Input /> with a visible <Label /> whenever the surrounding context does not already provide an accessible name.

import { Input } from "@acme/ui/input"
import { Label } from "@acme/ui/label"

<div className="flex plumeui-pw plumeui-naa">
  <Label htmlFor="email">Email address</Label>
  <Input id="email" type="email" placeholder="[email protected]" />
</div>

• Use a unique id and matching htmlFor value to associate labels and inputs.
• Use aria-invalid for validation feedback and provide a nearby error message.
• Use the form example for controlled validation and submission behavior.

API reference

Input

Input also accepts native input props such as type, value, defaultValue, placeholder, and onChange. The custom size prop controls visual sizing.