@softledger/form-components

Checkbox

From src/Checkbox.jsx

Checkbox component using react-switch

prop	type	default	required	description
disabled	Boolean	false	❌	true to disable toggling
onChange	Function		✅	callback when toggled
value	Boolean		❌	value of the component

ErrorFormFeedback

From src/ErrorFormFeedback.jsx

Display errors underneath an input component

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

FileUploadList

From src/FileUploadList.jsx

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'	❌	Text or JSX to display in the dropzone
files	Array		❌	list of files to display, can leave blank to not have table shown
onDrop	Function		✅	callback for when a file is dropped
onRemove	Function		❌	Callback for when a file is removed required if files prop is not blank

Input

From src/Input.jsx

Thing wrapper on input tag Displays errors below input

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

SLDate

From src/SLDate.jsx

Date Input component

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

SLDateRange

From src/SLDateRange.jsx

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

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

SLDateTime

From src/SLDateTime.jsx

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

SLForm

From src/SLForm.jsx

Form Component to display as a modal or not

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

SLFormGroup

From src/SLFormGroup.jsx

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

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

SelectCountry

From src/SelectCountry.jsx

Select a country code in a dropdown

prop	type	default	required	description
disabled	Boolean	false	❌	true to disable toggling
onChange	Function		✅	callback when a country is selected
value	String		❌	current selected country

SimpleSelect

From src/SimpleSelect.jsx

Simplified wrapper of react-select

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

TextArea

From src/TextArea.jsx

Thing wrapper on textarea tag Displays errors below input

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