Input

A text input field that allows users to enter data.

How to Import

Add this import to your component file

app/page.tsx

1import { Input } from '@/components/lightswind/input';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

type	string	text	The type of the input field (text, email, password, etc).	Optional
placeholder	string	-	Placeholder text to display when the input is empty.	Optional
value	string	-	The controlled value of the input.	Optional
defaultValue	string	-	The default value when the input is initially rendered.	Optional
disabled	boolean	false	When true, prevents the user from interacting with the input.	Optional
readOnly	boolean	false	When true, makes the input non-editable.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { Input } from '@/components/lightswind/input';
2
3export function InputDemo() {
4  return <Input type="text" placeholder="Email" />;
5}

Previousform

Nextinput-otp

A product byＭＵＨＩＬＡＮ and Team❤️.

Input

A text input field that allows users to enter data.

...

How to Import

Add this import to your component file

app/page.tsx

1import { Input } from '@/components/lightswind/input';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

type	string	text	The type of the input field (text, email, password, etc).	Optional
placeholder	string	-	Placeholder text to display when the input is empty.	Optional
value	string	-	The controlled value of the input.	Optional
defaultValue	string	-	The default value when the input is initially rendered.	Optional
disabled	boolean	false	When true, prevents the user from interacting with the input.	Optional
readOnly	boolean	false	When true, makes the input non-editable.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { Input } from '@/components/lightswind/input';
2
3export function InputDemo() {
4  return <Input type="text" placeholder="Email" />;
5}

Previousform

Nextinput-otp

A product byＭＵＨＩＬＡＮ and Team❤️.

Input

How to Import

Props

Basic Usage

On This Page

Contribute

Input

How to Import

Props

Basic Usage

On This Page

Contribute

React Input Component - Lightswind UI

Key Details of React Input

Input

How to Import

Props

Basic Usage

On This Page

Contribute

Input

How to Import

Props

Basic Usage

On This Page

Contribute