Text fields
The label sits above the hint and the input. Validation messages appear below the input with an icon, so the state never depends on colour alone.
Default
10 digits
Focused :focus-visible
10 digits
Filled
10 digits
Disabled disabled
10 digits
Read-only readonly
10 digits
Focusable and copyable, not editable. Dashed border and lock set it apart from disabled.
Error aria-invalid
10 digits
Enter a 10-digit account number.
Success
10 digits
Account verified.
Choices
Checkbox, radio group, toggle and select. Selection is shown by shape (tick, dot, thumb position) as well as colour.
Checkbox
“Send me paper statements”
Unchecked
Checked
Focused
Disabled
Error aria-invalid
Accept the terms to continue.
Radio group
“Statement frequency”
None selected
One selected
Focused
Disabled
Error aria-invalid
Toggle
“Notify me of transfers over $500” · role="switch", takes effect immediately
Off
On
Focused
Disabled
Select
“Transfer from”
Closed
Open aria-expanded
- Everyday account
- Savings account
- Joint account
Focused
Disabled
Error aria-invalid
Choose an account.
Buttons
One primary action per view. Loading keeps the label, adds a spinner and blocks repeat presses with aria-disabled so the button stays focusable.
Primary
“Send transfer”
Default
Hover
Focused
Pressed
Disabled
Loading
Secondary
“Save draft”
Default
Hover
Focused
Pressed
Disabled
Loading
Destructive
“Close account”
Default
Hover
Focused
Pressed
Disabled
Loading
Transfers list
The same list in each data state. Status badges pair colour with a distinct icon and label: tick for Completed, clock for Pending, cross for Failed.
Loading aria-busy
Recent transfers
Loading transfers…
Empty
Recent transfers
No transfers match your search.
Check the spelling, or search by recipient, amount or date.
Error
Recent transfers
Transfers could not be loaded.
Your money is safe. Check your connection and try again.
Populated
Recent transfers
| Date | Recipient | Amount | Status |
|---|---|---|---|
| 14 Oct 2026 | Nora Jansen14 Oct 2026 | $120.00 | Completed |
| 12 Oct 2026 | Elm Street Rentals12 Oct 2026 | $1,450.00 | Completed |
| 9 Oct 2026 | City Power & Water9 Oct 2026 | $86.40 | Pending |
| 3 Oct 2026 | Kaito Mori3 Oct 2026 | $250.00 | Failed |
Messages
Inline alerts sit next to the content they describe. Toasts confirm the result of an action and can be dismissed. The confirmation dialog guards actions that cannot be undone.
Inline alerts
Use role="status" for live updates, role="alert" only for errors
Information
Information: Transfers made after 6 pm are processed the next business day.
Success
Success: Your transfer was scheduled.
Warning
Warning: Your daily transfer limit is almost reached.
Error
Error: Your transfer could not be sent.
Toasts
Shown in place. In the app they stack bottom-right on desktop and bottom-centre on mobile.
Success
Transfer scheduled
$250.00 to Kaito Mori on 18 Oct 2026.
Error
Transfer failed
Nothing was taken from your account. Try again in a few minutes.
Confirmation dialog
Open state, shown inside its own panel. Focus starts on Cancel.
Open role="alertdialog"
Close account?
This action cannot be undone. Your remaining balance will be sent to your linked account.
Transfer form
The same form after a failed submit and after a successful one. On submit with errors, focus moves to the summary; each link jumps to its field.
Error state
Success state role="status"
Transfer scheduled
$250.00 to Kaito Mori on 18 Oct 2026
- From
- Everyday account
- To account
- 4021957310
- Reference
- HB-2610-48172