Managing states with Svelte stores

When building an interactive user interface, the first thing we consider is determining the necessary states to represent the various components and interactions.

For example, in the following snippet, I have a login form that has a few components, including two inputs, one checkbox, and one button:

<Input name="username" />
<Input name="password" />
<Checkbox label="Show Password" />
<Button>Submit</Button>

Each of the Svelte components has multiple states, as outlined here:

• The <Input /> component has an input value state and an error state set during validation
• The <Checkbox /> component has a checked/unchecked state, checked to reveal the password in the input
• The password <Input /> component has an additional state to reveal/hide the password
• The <Button /> component has an enabled/disabled state, disabled when the form is incomplete...