Design system/Component states
v1.0

THE DETAILS MAKE THE DIFFERENCE

Harbor Bank
component states

Form and feedback components, each shown in every state.

6 component groupsAll states visibleReference library
01

Text fields

A place for every detail

Default

10 digits

Focused

10 digits

Filled

10 digits

Disabled

10 digits

Read-only

10 digits

Error

10 digits

Enter a 10-digit account number.

Success

10 digits

Account verified.

Clarity at every step.

Helpful hints. Clear feedback.
A little reassurance goes a long way.

02

Choices

Small decisions, clear signals

Checkbox

5 states

Unchecked

Checked

Focused

Disabled

Error

Accept the terms to continue.

Statement frequency

5 states

None selected

Statement frequency — none selected

One selected

Statement frequency — one selected

Focused

Statement frequency — focused

Disabled

Statement frequency — disabled

Error

Statement frequency — error

Choose a frequency.

Toggle

4 states

Off

On

Focused

Disabled

Transfer from

5 states

Closed

Open

Choose an account
Everyday account
Savings account
Joint account

Focused

Disabled

Error

Choose an account.

03

Buttons

An action with intention

Primary

6 states
Default
Hover
Focused
Pressed
Disabled
Loading

Secondary

6 states
Default
Hover
Focused
Pressed
Disabled
Loading

Destructive

6 states
Default
Hover
Focused
Pressed
Disabled
Loading

Hover, focus and pressed styles are held in place for easy comparison.

04

Transfers list

Every moment accounted for

Loading

Recent transfers

Loading transfers…

Empty

Recent transfers

No transfers match your search.

Error

Recent transfers

Transfers could not be loaded.

Populated

Recent transfers

  • Nora Jansen

    $120.00

    Completed

  • Elm Street Rentals

    $1,450.00

    Completed

  • City Power & Water

    $86.40

    Pending

  • Kaito Mori

    $250.00

    Failed
05

Messages

The right words, at the right time

Inline alerts

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

Transfer scheduled

Transfer failed

Shown in place for reference.
These notifications stay until dismissed.

Confirmation dialog · Open

06

Transfer form

Putting it all together

From a helpful correction to a little peace of mind.

Make a transfer

Error

Fix 2 errors to continue.

Enter a 10-digit account number.

Enter an amount greater than $0.00.

Protected by Harbor Bank

Success

Transfer scheduled

$250.00 to Kaito Mori on 18 Oct 2026

All taken care of.