@softledger/form-components NPM

Checkbox

Checkbox component using react-switch

prop	type	default	required	description
disabled	`Boolean`	`false`	:x:	true to disable toggling
onChange	`Function`		:white_check_mark:	callback when toggled
value	`Boolean`		:x:	value of the component

Display errors underneath an input component

prop	type	default	required	description
errors	`Union<Array \\| String>`		:x:	List of errors to display, can be an array or string

Displays a dropzone for files Dropped files are displayed as a table with option to remove them individually

prop	type	default	required	description
dropText	`Union<String \\| Object>`	`'Drag Here to upload'`	:x:	Text or JSX to display in the dropzone
files	`Array`		:x:	list of files to display, can leave blank to not have table shown
onDrop	`Function`		:white_check_mark:	callback for when a file is dropped
onRemove	`Function`		:x:	Callback for when a file is removed required if files prop is not blank

Thing wrapper on input tag Displays errors below input

prop	type	default	required	description
className	`String`		:x:	additional classnames to add to input tag
disabled	`Boolean`	`false`	:x:	true to disable input
errorText	`Union<String \\| Array>`		:x:	Errors to display, should be a string or array of strings @type {type}
onChange	`Function`		:white_check_mark:	Callback when updated
style	`Object`		:x:	Addition styles
type	`String`	`'text'`	:x:	type of input
value	`*`		:x:	value of component

Date Input component

prop	type	default	required	description
disabled	`Boolean`	`false`	:x:	true to disable toggling
format	`String`	`'MM/DD/YYYY'`	:x:	How to Format the Presented Date
inputProps	`Object`		:x:	Additional props to add to the input
onChange	`Function`		:white_check_mark:	callback when date is selected
openLeft	`Boolean`	`false`	:x:	offset to display calendar in pixels
timezone	`String`		:x:	Timezone to use for for display
value	`Union<String \\| Object>`		:x:	Current date to display should be a string, Date(), or moment()

Input which allows user to pick a range of dates wrapper on react-dates

prop	type	default	required	description
buttonText	`String`	`'Filter'`	:x:	Text for button
disabled	`Boolean`	`false`	:x:	true to disable toggling
endDate	`Union<String \\| Object>`		:x:	value to use as end date
id	`String`		:white_check_mark:	Unique ID required
onChange	`Function`		:white_check_mark:	callback when start or end date changes
startDate	`Union<String \\| Object>`		:x:	value to use as startDate

prop	type	default	required	description
dateFormat	`String`	`'MM/DD/YYYY'`	:x:	How to Format the Presented Date
disabled	`Boolean`	`false`	:x:	true to disable toggling
inputProps	`Object`		:x:	Additional props to add to the input
onChange	`Function`		:white_check_mark:	callback when date is selected
openLeft	`Unknown`	`false`	:x:
timeFormat	`Unknown`	`'HH:mm:ss'`	:x:
timezone	`String`		:x:	Timezone to use for for display
value	`Union<String \\| Object>`		:x:	Current date to display should be a string, Date(), or moment()

Form Component to display as a modal or not

prop	type	required	description
Button	`Function`	:x:	Function that returns a button * this is passed a cb for the buttons onclick method toggle => Btn
fields	`Object`	:white_check_mark:	Form fields to display, should be JSX * recommended to use SLFormGroup wrapped components for best presentation
formInValid	`Boolean`	:x:	Set to true if the form is not valid this will disable the submit button
header	`String`	:x:	Header Text for Modal *required if notModal={false}
notModal	`Boolean`	:x:	Set true if the form should not be a modal
onSubmit	`Function`	:white_check_mark:	Callback when form is submitted, expected to return Promise
onToggle	`Function`	:x:	callback for when the modal is toggled open
size	`Enum('sm','md','lg','xl')`	:x:	size of the modal
submitButton	`Function`	:x:	If notModal={true} a custom submit button may be used * this is passed a callback for submit and formInvalid (submit, invalid) => submit

Wrapper for a form input which will display labels and align elements nicely in an SLForm

prop	type	default	required	description
check	`Boolean`	`false`	:x:	Set to true if the input is a check or radio to display label correctly
helpText	`String`		:x:	Help text to display when hovering over help icon * useful for giving context to an input value
hideLabel	`Boolean`	`false`	:x:	Set true to hide the label component
input	`Object`		:white_check_mark:	Form Input JSX
label	`String`		:x:	Input Label Text

Select a country code in a dropdown

prop	type	default	required	description
disabled	`Boolean`	`false`	:x:	true to disable toggling
onChange	`Function`		:white_check_mark:	callback when a country is selected
value	`String`		:x:	current selected country

Simplified wrapper of react-select

prop	type	default	required	description
disabled	`Boolean`	`false`	:x:	true to disable toggling
errorText	`Union<String \\| Array>`		:x:	Errors to display, should be a string or array of strings @type {type}
labelField	`String`	`'label'`	:x:	object key to use as the label
onChange	`Function`		:white_check_mark:	callback when option selected
options	`Array`		:white_check_mark:	array of objects to choose from should have keys with value of valueField and labelField props
valueField	`String`	`'_id'`	:x:	object key to use for the value

Thing wrapper on textarea tag Displays errors below input

prop	type	default	required	description
className	`String`		:x:	additional classnames to add to input tag
disabled	`Boolean`	`false`	:x:	true to disable toggling
onChange	`Function`		:white_check_mark:	Callback when updated
value	`*`		:x:	value of component