Input

Installation

bunx --bun harukit@latest add input

npx harukit@latest add input

pnpm dlx harukit@latest add input

yarn dlx harukit@latest add input

Example

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

export function InputDemo() {
  return (
    <div className="grid w-full items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Enter your email" />
    </div>
  );
}

Usage

Import

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

Code

<Input />

API Reference

Prop	Type	Default	Description
`type`	`string`	`"text"`	The type of input.
`placeholder`	`string`	-	Placeholder text for the input.
`disabled`	`boolean`	`false`	When `true`, prevents the user from interacting with the input.
`readOnly`	`boolean`	`false`	When `true`, the input is read-only.
`required`	`boolean`	`false`	When `true`, the input is required.
`value`	`string`	-	The value of the input.
`onChange`	`(event: ChangeEvent<HTMLInputElement>) => void`	-	Event handler called when the value changes.
`onFocus`	`(event: FocusEvent<HTMLInputElement>) => void`	-	Event handler called when the input receives focus.
`onBlur`	`(event: FocusEvent<HTMLInputElement>) => void`	-	Event handler called when the input loses focus.

Input

Installation

Example

Usage

Import

Code

API Reference

On this page