Input

A text field that passes through native input attributes.

Overview

Input renders a native input. The default type is text. It does not wrap the control, so labels, descriptions, and validation attributes use normal HTML.

Preview

Customize

Type
Disabled
Placeholder
Required

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add input

Usage

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

export function EmailField() {
  return (
    <label htmlFor="email" className="flex flex-col gap-2 text-sm">
      Email
      <Input id="email" name="email" type="email" placeholder="name@example.com" />
    </label>
  );
}

Examples

Basic

A text input with an accessible name from aria-label.

Email

type controls the native input. Email asks for an email address.

Label and description

Associate a label with htmlFor and id. Point aria-describedby at the help text.

We use this for account recovery.

Required

required is the native constraint. The label should say that the field is required.

Disabled

A disabled input cannot be edited and uses the not-allowed cursor.

Invalid

aria-invalid is forwarded to the input. The component does not change its border for that state.

In practice

Email and password fields sit above a remember checkbox and a Sign in button.

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
typestring"text"Native input type.
classNamestring—Merged onto the input with cn.
disabledboolean—Native disabled state. Uses a not-allowed cursor and reduced opacity.
placeholderstring—Placeholder text. It is not a label.
requiredboolean—Native required state.
valuestring—Controlled value. Pair it with onChange.
defaultValuestring—Uncontrolled initial value.
aria-invalid"true" | "false"—Passed through. Input does not add a separate invalid color.

Accessibility

Input is a native input. It does not add an ARIA role.

  • Name it with a label and matching id, or with aria-label.
  • Placeholder text is not a replacement for the label.
  • Use the native type, such as email or password, when it matches the data.
  • disabled prevents editing. Focus uses a visible focus-visible ring.
  • aria-invalid and aria-describedby are passed through.