Binhlaig UI Component

Input

Input fields allow users to enter text, email, passwords, numbers, dates and files.

Installation

Add the Input component using the Binhlaig UI CLI.

Terminal

npx binhlaig-ui@latest add input

Import the Input component from your UI directory.

TypeScript

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

Use Input for simple text entry.

Input supports all standard HTML input types.

Use a label to clearly identify the requested value.

Email address

Supporting text can explain the expected input value.

Username

This will be your public display name.

Add an icon to provide visual context.

Allow users to show or hide their password.

Disabled inputs cannot be edited or focused.

Use aria-invalid and error styles for invalid values.

Email address

Enter a valid email address.

Use the file input type to upload files.

Profile picture

Combine inputs and buttons to create a complete form.

The Input component accepts standard React input properties.

Prop	Type	Default	Description
`type`	`React.HTMLInputTypeAttribute`	`"text"`	Controls the type of input value.
`placeholder`	`string`	`—`	Displays temporary hint text.
`value`	`string \| number`	`—`	Controls the current input value.
`defaultValue`	`string \| number`	`—`	Sets the initial uncontrolled value.
`disabled`	`boolean`	`false`	Prevents interaction with the input.
`readOnly`	`boolean`	`false`	Prevents editing while allowing focus.
`required`	`boolean`	`false`	Marks the input as required.
`aria-invalid`	`boolean`	`false`	Marks the current value as invalid.
`className`	`string`	`—`	Adds custom Tailwind CSS classes.
`onChange`	`React.ChangeEventHandler<HTMLInputElement>`	`—`	Runs whenever the input value changes.