README.md

cl-form-component docs

Check out this link for StoryBook examples.

Check out this sandbox for an example.

Form

type SomeInput = {
  username: string;
  password: string;
  rememberUser: boolean;

  // pass in inputs for better type support
  <Form<SomeInput>
    {...props}
  />
}

prop	type	required	default	note
entries	Entries	yes	-	object with inputs and options
onFormSubmit	Function	yes	-	state always passed on as an argument
header	string | React.ReactElement	no	undefined	form header label or element
submitBtnOpts	ButtonProps & { text?: string; disableOnInvalidForm?: boolean; resetFormOnValidSubmit?: boolean; }	no	undefined	submit button props
wrapperClass	string	no	undefined	className for div form wrapper
wrapperStyle	React.CSSProperties	no	undefined	styles for div form wrapper
formClass	string	no	undefined	className for form element
formStyle	React.CSSProperties	no	undefined	styles for form element

---

Entries

Form always takes an entries prop that defines all given inputs. Five different components are supported: 'input' | 'checkbox' | 'switch' | 'select' | 'radio'.

{
  someInput: {
    // here we can specify one of the different components, lets say 'checkbox':
    checkbox: {
      ...checkboxEntry,
    },
    // or input
    input: {
      ...inputEntry,
    },
  },
};

In the below props tables, the type T denotes the input types provided, an object like so: {[key: string]: unknown}. K is a map with keyof T.

Input Entry

Takes Shared Props and the following:

prop	type	required	default	note
element	standard | filled | outlined	no	standard	input element variant
type	text | number | password | color | date | datetime-local | file | month | week | range | search | tel | time | url | email	no	text	input element type
placeholder	string	no	undefined	input element placeholder
minRows	string | number	no	undefined	minimum rows for element
maxRows	string | number	no	undefined	maximum rows for element
multiline	boolean	no	false	uses textarea element
adornment	{start?: React.ReactElement; end?: React.ReactElement}	no	undefined	component adornment(s) for element
muiInputProps	InputProps	no	undefined	props for material-ui
muiInputLabelOpts	InputLabelProps	no	undefined	props for material-ui

(Checkbox | Switch) Entry

Takes Shared Props and the following:

prop	type	required	default	note
data	Array<Data | string>	yes	-	checkbox or switch data
fallbackValue	T[K]	no	""	value used when no entries are checked
muiFormLabelOpts	FormLabelProps	no	undefined	props for material-ui
muiFormGroupOpts	FormGroupProps	no	undefined	props for material-ui

Data

prop	type	required	default	note
val	T[K]	yes	-	value used
text	string	no	undefined	text label shown
controlComponent	React.ReactElement	no	undefined	custom control component
muiFormControlLabelOpts	FormControlLabel	no	undefined	props for material-ui
muiCheckboxOpts | muiSwitchOpts	CheckboxProps | SwitchProps	no	undefined	props for material-ui

Select Entry

Takes Shared Props and the following:

prop	type	required	default	note
data	Array<Data | T[K]>	yes	-	select data
type	menu | tag | chip | native	no	menu	select element variant
containerStyle	React.CSSProperties	no	undefined	container div style
tagRenderValueCb	(selected: string[]) => string	no	undefined	customize render value
muiSelectOpts	SelectProps	no	undefined	props for material-ui
muiChipOpts	ChipProps	no	undefined	props for material-ui
muiInputLabelOpts	InputLabelProps	no	undefined	props for material-ui

Data

prop	type	required	default	note
val	T[K]	yes	-	value used
text	string	no	undefined	text label shown
muiMenuItemProps	MenuItemProps	no	undefined	props for material-ui
muiCheckboxOpts	CheckboxProps	no	undefined	props for material-ui
muiListItemTextOpts	ListItemTextProps	no	undefined	props for material-ui
muiOptionOpts	React.OptionHTMLAttributes<HTMLOptionElement>	no	undefined	props for native option

Radio Entry

Takes Shared Props and the following:

prop	type	required	default	note
data	Array<Data | string>	yes	-	radio data
muiRadioGroupOpts	RadioGroupProps	no	undefined	props for material-ui
muiFormLabelOpts	FormLabelProps	no	undefined	props for material-ui

Data

prop	type	required	default	note
val	T[K]	yes	-	value used
text	string	no	undefined	text label shown
muiFormControlLabelOpts	MenuItemProps	no	undefined	props for material-ui
muiRadioOpts	CheckboxProps	no	undefined	props for material-ui

Shared Props

prop	type	required	default	note
initialValue	T[K]	yes	-	initial value of element
position	number	no	0	position of element in rendered form
validation	Validation	no	{}	validation options
label	string	no	""	element text label
required	boolean	no	false	visually shows element as required
fullWidth	boolean	no	false	element expands full container width
disabled	boolean	no	false	disables element
validEl	string | React.ReactElement	no	undefined	element to be shown on valid state
errorEl	string | React.ReactElement	no	undefined	element to be shown on invalid state
helperEl	string | React.ReactElement	no	undefined	element to be shown on neutral state
wrapperStyle	React.CSSProperties	no	undefined	styles for element wrapper div
muiFormControlOpts	FormControlProps	no	undefined	props for material-ui
muiFormHelperTextOpts	FormHelperTextProps	no	undefined	props for material-ui

---

onFormSubmit

(isValid: boolean, inputs: T) => void

isValid is true if all entries are valid i.e the entire form is valid. inputs will be an object containing a key/value pair of each input at submission time.