Input

The Input component is a form control that allows users to enter text or data, with support for various styles, icons, and states.

Basic Usage

import { Input, ThemeProvider } from "@carton-org/react-neumorphism";

const MyComponent = () => {
  return <Input label="Username" inputSize="md" />;
};

Live Example

Username

Props

Name	Type	Description	Required	Default Value
label	string	Label text for the input field	No	-
inputSize	"xs" | "sm" | "md" | "lg" | "xl"	Size of the input field	No	"sm"
iconLeft	React.ReactNode	Icon to display on the left side of the input	No	-
iconRight	React.ReactNode	Icon to display on the right side of the input	No	-
iconStyle	'inset' | 'default' | 'outline'	Style of the icons	No	'default'
disabled	boolean	Whether the input is disabled	No	false
inputContainerStyle	React.CSSProperties	Custom styles for the input container	No	-
inputLabelStyle	React.CSSProperties	Custom styles for the input label	No	-
inputStyle	React.CSSProperties	Custom styles for the input field	No	-

Examples

Different Sizes

Small Size

Small Input

Medium Size

Medium Input

Large Size

Large Input

With Icons

Left Icon

With Left Icon

Right Icon

With Right Icon

Both Icons

With Both Icons

Icon Styles

Default Icon Style

Default Style

Inset Icon Style

Inset Style

Outline Icon Style

Outline Style

States

Disabled Input

Disabled

With Placeholder

With Placeholder