Anti examples A form Click anywhere to arm sound
example / a form

The surface everyone ships, with a voice.

Focus, validation, suggestions and a save, on the grammar.

01

Fill it in

Tab between the fields, get the email wrong, take a suggestion with the arrow keys, then save. Four of the six decisions here are restraint.

What is a plan?
Last eventnone
Saveidle
// Focus moved. Position, not action: the same
// event a detent and an insertion point get.
input.addEventListener('focus', () => Anti.play('tick'))

// Typing is SILENT here. The keys example scores
// every character because typing is what that
// surface is about; in a form it is what you do
// on the way to the thing you came for.

// A verdict, and only on blur. Validating while
// someone is still typing is telling them they
// are wrong before they have finished speaking.
input.addEventListener('blur', () => {
  if (!input.value) return              // untouched
  if (!valid(input.value)) Anti.play('reject')
  // and a valid field says NOTHING. Silence is
  // the default state, and correct is expected.
})

// The save is a run that resolves, not a spinner
// with a ping at the end.
Anti.progress.start('save', 0)
Anti.progress.done('save')
toast('success', 'Saved')
02

The four that stay quiet

Each of these is silent by choice.

Typingsilent
A valid field on blursilent
Hovering the help chipsilent
The disabled savesilent

Hover the help chip: nothing. Resting is not an action.

// A tooltip is silent: a pointer that stopped
// moving has not acted.

// A disabled control is silent: nothing happened.
// A locked one refuses out loud, because a refusal
// is an answer.