Input

Displays a form input field or a component that looks like an input field.

Installation

Copy and paste the following code into your project.

import clsx from 'clsx';
import { forwardRef } from 'react';
import styles from './styles.module.scss';
 
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
const Input = forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
    return <input type={type} className={clsx(styles.input, className)} ref={ref} {...props} />;
});
Input.displayName = 'Input';
 
export { Input };

Update the import paths to match your project setup.

Usage

import { Input } from '@/components/ui/input';
<Input />

Examples

Default

File

Disabled

With Label

With Button

Form

This is your public display name.