Error Shake

Usage

import { ShakeField } from '@wdzyi/ui';

<ShakeField
  label='Email'
  type='email'
  action='Subscribe'
  done='You’re on the list.'
  validate={(email) => (email.includes('@') ? null : 'An email needs an @ in it.')}
  onSubmit={subscribe}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

labelstring

Above the field, and its name.

validate(value: string) => string | null

Says what’s wrong with a value, or nothing when it’s fine.

onSubmit(value: string) => void

Called with the value when a submit passes.

value, defaultValue, onChangestring, string, (value: string) => void

Hold the value yourself, or let the field hold it.

actionstring = 'Submit'

The button’s word.

donestring

Said under it after a good submit.

type, name, placeholder, autoCompletestring

Passed to the input.

Notes

• The shake is a damped swing, three and a half times either way in 560ms, each one smaller than the last.
• Once it has turned a value away, it checks again on every change, so fixing the value clears the error as you type. Until then, it leaves you to type.
• The input is marked invalid and described by the message. A screen reader hears the reason on submit and Fixed once it’s right, rather than every change in between.
• Below 300px wide, the button keeps its arrow and drops its word.
• With reduced motion, it doesn’t shake. The underline and the message still say what’s wrong.