Form patterns

Inputs, feedback, dialogs

A working tour of the form-control, alert, dialog, code-block, and keyboard-chip components. Every control here is a token-driven Inkwell primitive.

Input controls

5 controls

Workspace name Shown to teammates and on shared links.

URL slug Slugs cannot contain spaces. Try acme-editorial.

Default region Used as the seed region for new projects.

Description

Archived snapshot Disabled fields use --gray-100 background and --gray-500 text.

Selection controls

3 controls

Notifications Weekly digest email Comment mentions Release announcements

Default theme Match system Always light Always dark

Workspace flags Two-factor authentication required Public profile page Quiet hours respect timezone

System messages

4 severities

Heads up

Your workspace will move to the new billing model on the first of next month.

Settings saved

Changes are live for everyone in this workspace.

Approaching plan limit

You've used 87% of your monthly seat allocation.

Sync failed

Last attempt at 14:02 returned a 502. We'll retry in 5 minutes.

Keyboard & code

2 patterns

Save with ⌘S · Open command palette with ⌘K · Toggle theme with ⌥T

const dialog = document.querySelector('#confirm');
document.querySelector('#open').addEventListener('click', () => {
  dialog.showModal();
});

Confirmation dialog

native <dialog>

Native HTML <dialog> with focus trap, ESC-to-close, and styled ::backdrop. Zero JS beyond showModal().

Built with inkwell.css. Components added in this revision: .field, .input.is-error, .textarea, .select, .radio, .switch, kbd, .alert, .code-block, .dialog.

Made with hairlines and serifs by Vinny Carpenter. The 1.5px is on purpose.