formfieldsui

Input field's for React.js and Next.js ---

Installation:-

Using npm :-

$ npm install --save formfieldsui

Using yarn :-

$ yarn add formfieldsui

Import and example:-

import { EmailFieldInput, TextFieldInput, TextAreaFieldInput, PasswordFieldInput, ButtonFieldInput} from "formfieldsui";

<EmailFieldInput
label='EmailLabel'
placeholder='placeholder'
onChange={(e) =>  e.target.value}
/>

<TextFieldInput
label='textLabel'
placeholder='placeholder'
onChange={(e) =>  e.target.value}
/>

<TextAreaFieldInput
label='textAreaLabel'
placeholder='placeholder'
onChange={(e) =>  e.target.value}
/>

<PasswordFieldInput
label='textLabel'
placeholder='placeholder'
onChange={(e) =>  e.target.value}
/>

<ButtonFieldInput
onClick={() => alert('alert message')}
buttonText="Click"
/>

Props:-

Name	Type	Default	Description
type	string	text-TextFieldInput, email-EmailFieldInput, password-PasswordFieldInput	It's customizable and it's only applicable for TextFieldInput
Label	string		The label content.
helperText	string		The helper text content for message's.
error	bool	false	If true, the label is displayed in an error state.
id	string		The id of the input element. Use this prop to make label and helperText accessible for screen readers.
value	any		The value of the input element, required for a controlled component.
name	string		Name attribute of the input element.
placeholder	string		The placeholder content.
onChange	func		onChange={(e)= e.target.value}
rows	number		The rows attribute specifies the visible height of a text area, in lines. (it's only aplicable for TextAreaFieldInput)
cols	number		The cols attribute specifies the visible width of a text area. (it's only aplicable for TextAreaFieldInput)
disabled	bool	false	If true, the input field is disabled
showPassword	bool		It's only applicable for PasswordFieldInput, this state change show and hide icon & paswword filed type to text>password and vice versa
showImg	string		It is used to pass show password eye icon image path
hideImg	string		It is used to pass hide password eye icon image path
changeIconFunc	func		handle showPassword state
autoFocus	string		Specifies that a button should automatically get focus when the page loads
buttonText	string		button name

ClassName for Css:-

lableClass = for label,
rootClass = for input fields,
helperTextClass = for notification "error message"

variant :-

	Variant name for Input fields
	Outlined
	Standard
	Filled

Ex:-
import { Standard, Filled, Outlined  } from "formfieldsui";

    <TextFieldInput  variant={Outlined} />
    <EmailFieldInput  variant={Standard} />
    <PasswordFieldInput  variant={Filled} />

	Variant name for Button
	BtnOutlined
	BtnStandard
	BtnFilled

Ex:-
import { BtnOutlined } from "formfieldsui";

    <ButtonFieldInput variant={BtnOutlined}/>