@flexcodelabs/input

@flexcodelabs/input

Package Name

• Features
• Installation
• Usage
• Examples
• Props

Features

• List of features

Installation

npm install @flexcodelabs/input

or

yarn add @flexcodelabs/input

Usage

...
import Input from '@flexcodelabs/input';

// Normal input
<Input
  label="Label"
  value={email}
  name="email"
  onChange={onChange}
  placeholder="Label"
/>

// password input
<Input
  label="Password"
  value={password}
  type="password"
  name="password"
  onChange={onChange}
  placeholder="********"
/>

// textarea
<Input
  label="Your Message"
  textarea
  value={message}
  handleChange={onChange}
  name="message"
/>

// Input with error message
<Input
  label="Label"
  value={email}
  name="email"
  onChange={onChange}
  placeholder="Label"
  error="Error message"
/>

// Input with success message
<Input
  label="Label"
  value={email}
  name="email"
  onChange={onChange}
  placeholder="Label"
  success="Success message"
/>

Examples

Source code

Props

Name	Type	Default	Required	Description
label	string	-	false	input label
disabled	boolean	-	false	input disabled status
autoComplete	string	-	false
inputClass	string	-	false	input custom class name
inputStyle	CSSProperties	-	false	input custom styles
error	string	-	false	error message
onChange	func()	-	false
type	string	-	false	input type
success	string	-	false	success message
value	string or number	-	true	input value
name	string	-	false	input name
required	boolean	-	false	whether input field is required
showLabel	boolean	true	false	show or hide input label
textarea	boolean	-	false	whether to display textarea or normal input
placeholder	string	-	false
showIcon	ReactNode	-	false	show icon for password input field
hideIcon	ReactNode	-	false	hide icon for password input field
className	string	-	false	custom class name
style	CSSProperties	-	false	custom styles
inputMode	search, text, tel, none, url, email, numeric, decimal or undefined	-	false