@stnew/forms

@stnew/forms

Modular form components with some pre-configured form inputs for common use-cases.

npm install @stnew/forms

FormInput

A controlled component that composes an input element with a wrapper element and an optional and extendable indicator component. The indicator component is meant to provide visual indication of valid/invalid states.

import { FormInput } from '@stnew/forms';

Controlled Props	Type	Desc
type	string	type of the input field
value	string	current value of the input field
invalid	boolean	should be true if the current value is invalid
validated	boolean	should be true if the current value is valid

General Props	Type	Desc
id	string	id of the input element
name	string	name of the input element
className	string	class of the input element
required	boolean	toggle to make the input field required
autoFocus	boolean	toggle to make the input field focused by default
placeholder	string	placeholder text for the input field
customInputIndicator	ReactNode	Element to be nested in the existing indicator div element
disableIndicator	boolean	if true, the indicator div element will not be rendered
onChange	function	onChange callback function
onFocus	function	onFocus callback function
onBlur	function	onBlur callback function

ValidatedInput

Component that wraps FormInput and handles validation and state management.

import { ValidatedInput } from '@stnew/forms';

Props	Type	Desc
onValid	function	callback for when the input's value is valid
onInvalid	function	callback for when the input's value is invalid
onEmpty	function	callback for when the input's value is empty
validator	function	function that takes in the value of the input and returns true if valid, false otherwise
type	string	type of the input element
input	object	object will all attributes listed under 'General Props' for FormInput

Others

The package also includes some extentions of ValidatedInput that have built-in validation functions for common use cases. Each of these are the same, but with different validation functions.

• EmailInput
• ZipCodeInput

import { EmailInput, ZipCodeInput } from '@stnew/forms';

Props	Type	Desc
onValid	function	callback for when the input's value is valid
onInvalid	function	callback for when the input's value is invalid
onEmpty	function	callback for when the input's value is empty

• also includes all props listed under 'General Props' for FormInput