Input

Install

pnpm dlx shadcn@latest add @vegastack/input

Usage

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

<Input type="email" placeholder="you@vegastack.com" />;

Input is built on Base UI Input, so standard input attributes work alongside Base UI render, onValueChange, Field state data attributes, and state-function className. Its ref forwards to the underlying input element.

Examples

States

The field reflects disabled, readOnly, and aria-invalid. The invalid state re-colors the border with the destructive-border token (aria-invalid:border-destructive-border/(--alpha-tint-border)) — pair it with a visible error message for non-color-dependent feedback. While the field is focused the focus tint wins the border and the invalid tint returns on blur: a text field has no outline, so the border is its only focus cue and nothing else may hold it.

Input types

Input forwards any HTML type to the underlying <input> — number, tel, url, email, password, and the rest all work alongside the shared field styling. type defaults to 'text'.

Addons

Pass a prefix and/or suffix to render non-editable content inside the field — a domain like app.vegastack.com/, a unit, or an icon. In addon mode the <input> is wrapped in a bordered group, and focus/invalid/disabled styling moves to the wrapper so the whole field reacts as one unit. Use className for the Base UI input and containerClassName for the addon wrapper.

In addon mode the wrapper reads the inner input's state through has-* selectors, so disabled and aria-invalid recolor the whole group rather than just the <input> — has-disabled:* dims the group and has-aria-invalid:border-destructive-border/(--alpha-tint-border) marks it invalid. As on a bare field, the group's focus tint outranks the invalid one while anything inside it holds focus.

Controlled value (onValueChange)

Base UI exposes onValueChange, which receives the next string value directly (no event unwrapping) — convenient for controlled fields and derived UI. It fires alongside the native onChange.

const [value, setValue] = useState("");

<Input
  value={value}
  onValueChange={setValue}
  placeholder="Type a workspace name"
/>;

Polymorphism (render)

Use Base UI's render prop to swap the underlying element while keeping the field styling and behavior — pass an element to merge props into, or a function for full control.

<Input render={<input data-testid="rendered-input" />} type="email" />

Playground

Try every type, size, and state — flipping Invalid on replays the built-in shake — then copy the generated JSX.

<Input placeholder="you@vegastack.com" />

API Reference

Accessibility

• Renders Base UI Input as a native <input> by default — always associate a visible <label> (wrap it or use htmlFor/id); use aria-label only when a visible label is impossible.
• On focus the field recolors its border with the ring token (focus:border-ring/(--alpha-tint-border)) instead of removing the outline — never outline: none with no replacement affordance. Textarea and OTPInput use the identical border tint, so text-entry focus reads the same across all three.
• Set aria-invalid (and aria-describedby pointing at the error text) to mark a field invalid; the styling is token-driven and never relies on color alone.
• prefix/suffix addons are decorative label text; keep the meaningful value in the input itself so assistive tech reads the field, not the chrome.

Do / Don't