🪶 @slimr/forms 
A slim (< 1kB), enhanced HTML form with auto-disabling, auto-reset, error handling, more JS events, and context to its children.
- optimizes for vanilla, uncontrolled input elements
- does not cause re-renders
- disables form elements while submitting
- can auto-reset the form is desired
- uses browser accessibility APIs to share errors to form elements
- wraps onSubmit to
- auto call event.preventsDefault()
- pass form values as an Object
- provide JS events and React context for rejected, submitted, accepted states
- < 1kB when bundled+gzipped with a broader application
Context
@slimr is a set of slim React (hence '@slimr') libs. Check them all out on github!
Usage
- From the demo app:
<SForm onSubmit={(_, vals) => console.log(vals)}>
{[
'checkbox',
'color',
'date',
'email',
'number',
'password',
'search',
'text',
'textarea',
'tel',
'url',
].map(type => (
<InputBox key={type} label={type} name={type} type={type} required />
))}
<RadioBox
label="Radios"
name="radio1"
options={[
{label: 'Choice 1', value: 'choice1'},
{label: 'Choice 2', value: 'choice2'},
{label: 'Choice 3', value: 'choice3'},
]}
required
/>
<SelectBox
label={'Select Single'}
name="select1"
options={[
{label: '--', value: ''},
{label: 'Choice 1', value: 'choice1'},
{label: 'Choice 2', value: 'choice2'},
{label: 'Choice 3', value: 'choice3'},
]}
required
/>
<SelectBox
label={'Select multiple'}
multiple
name="select2"
options={[
{label: 'Choice 1', value: 'choice1'},
{label: 'Choice 2', value: 'choice2'},
{label: 'Choice 3', value: 'choice3'},
]}
required
/>
<FormFooter />
<RenderCheck />
</SForm>API
SForm
An enhanced HTML form with auto-disabling, auto-reset, error handling, more JS events, and context to its children.
SFormError
An extension of Error that accepts an errorSet as a constructor property. It is used to share errors to form elements
throw new FormError({field1: 'This field is invalid'})useSFormContext
A hook to get the current state of the form