Components › Forms

Input

A text field with optional leading and trailing slots. Pair it with Field for label, hint and error.

Installation

npx plankui@latest add input

Usage

import { Input } from "@/components/ui/input";

<Field label="Email" htmlFor="email" hint="We never share it.">
  <Input id="email" leading={<AtSign />} />
</Field>

API reference

PropTypeDefaultDescription
leadingReactNodeIcon or text before the value.
trailingReactNodeIcon, key hint or button after the value.
inputSize"sm" | "md" | "lg""md"Field height.
aria-invalidbooleanSwitches to the error style.

View the source on GitHub