Design systemComponent states
Web componentsv1.0

The details make the difference

Harbor Bank component states

Form and feedback components, each shown in every state.

All states, side by side Static previews Ready for review
01

Text fields

A clear starting point. Helpful guidance at every step.

07 states

Default

10 digits

Focused

10 digits

Filled

10 digits

Disabled

10 digits

Read-only

10 digits

Error

10 digits

Success

10 digits
Clarity in every statePersistent labels and hints.
Feedback that explains the next step.
02

Choices

Simple decisions, with unmistakable selection and focus.

04 components

Checkbox

For an independent choice.

Unchecked

Checked

Focused

Disabled

Error

Statement frequency

Radio group · One option from a set.

None selected

Statement frequency — None selected

Selected

Statement frequency — Selected

Focused

Statement frequency — Focused

Disabled

Statement frequency — Disabled

Error

Statement frequency — Error

Toggle

A preference that is on or off.

Off

On

Focused

Disabled

The setting takes effect immediately.

Transfer from

Select · Choose an account from a list.

Closed

Open

Choose an account
  • Everyday account
  • Savings account
  • Joint account

Focused

Disabled

Error

03

Buttons

A consistent hierarchy for every kind of action.

18 samples
Primary, secondary, and destructive buttons in six states
Variant Default Hover Focused Pressed Disabled Loading
PrimaryMain action
SecondarySupporting action
DestructiveIrreversible action
Hover, focus and pressed styles are pinned for comparison. Loading keeps the action label visible.
04

Transfers list

From the first request to the most recent activity.

04 states

Loading

Recent transfers

Loading transfers.

Empty

Recent transfers

No transfers match your search.

Try a different name or amount.

Error

Recent transfers

Transfers could not be loaded.

Please try again in a moment.

Populated

Recent transfers

Recent transfers: date, recipient, amount, and status
DateRecipientAmountStatus
14 Oct 2026Nora Jansen$120.00Completed
12 Oct 2026Elm Street Rentals$1,450.00Completed
9 Oct 2026City Power & Water$86.40Pending
3 Oct 2026Kaito Mori$250.00Failed
05

Messages

The right feedback, in the right moment.

Alerts · Toasts · Dialog

Inline alerts 04 types

Information

Transfers made after 6 pm are processed the next business day.

Success

Your transfer was scheduled.

Warning

Your daily transfer limit is almost reached.

Error

Your transfer could not be sent.

Toast notifications In-place previews

Transfer scheduled
Transfer failed

Confirmation dialog Open preview

Close account?

This action cannot be undone. Your remaining balance will be sent to your linked account.

06

Transfer form

Individual components, working together.

02 outcomes

Error state

Send a transfer

Move money with a few simple details.

Visible to you and the recipient.

Success state

Transfer scheduled

$250.00 to Kaito Mori on 18 Oct 2026

From
Everyday account
Recipient
Kaito Mori
Amount
$250.00
Send on
18 Oct 2026
Status
Scheduled
Your transfer details are securely saved.