Patterns

Withdrawal

Withdraw money from the player's gaming account using Swish or a registered bank account.

Example

Enter an amount, choose Swish or bank account, and complete a simulated withdrawal. Expand Prova exemplets tillstånd to reset the example with a missing bank account, an account under verification or a failed withdrawal. Enter an amount above the balance to try the field error. No money is transferred.

PreviewCodeReadme

Anatomy

1. Heading and introduction. Explain what the player can do.
2. Balance. Show the current balance and the amount remaining after the proposed withdrawal.
3. Amount. A labelled input with a kr suffix.
4. Withdrawal method. A select for Swish or bank account.
5. Destination. Show the saved mobile number or bank details, with an action to change them.
6. Primary action. Withdraw, register a bank account or save account details, depending on the state.
7. Feedback. Field errors, a verification notice, a confirmation dialog and a success snackbar.

Behaviour

Amount and balance

The remaining balance updates while a valid amount is entered. An empty, invalid or excessive amount keeps the current balance in the summary. Submitting shows an error beside the amount field and moves focus there. Amounts use Swedish formatting and a kr suffix.

Swish

Swish is selected initially. Show the saved mobile number with Ändra. Editing replaces the summary with a mobile input and a description explaining that the number is saved when a withdrawal is made. A separate information dialog explains how the number is used.

Ta ut opens a confirmation dialog with the amount and destination number. Avbryt returns to the form; Gör uttag starts the simulated transfer.

Bank account

Show the bank, clearing number and account number as labelled values. If no account is registered, replace the withdrawal action with Registrera bankkonto. Registration and editing show the clearing and account inputs inline, with Spara bankkonto and Avbryt.

Saving starts the mock verification state. The bank details stay visible and a Notice explains why bank withdrawals are unavailable and suggests Swish. The withdrawal action is hidden during verification. Switching to Swish remains possible.

For a ready bank account, Ta ut starts the simulated transfer directly. The text below the form explains when the money is expected to arrive.

Responsive layout

The example uses a centred, single-column layout. The form fills the available width on small screens, stays constrained on medium screens, and widens on large screens. Labels stay above their inputs and the primary action spans the form width.

Site navigation belongs to the surrounding application.

States

• Submitting. Keep the entered values, label the action Genomför uttag…, mark the form busy and prevent duplicate transfers.
• Field error. Keep the form visible, connect the message to the input and move focus to the first invalid field.
• Missing account. Explain that no bank account is saved and offer registration.
• Verification. Keep the destination visible with an attention Notice and offer Swish through the method selector.
• Transfer error. Show an error dialog and preserve the amount, destination and balance so the player can try again.
• Success. Update the balance, clear the amount and show a dismissible snackbar.

Accessibility

• Inputs and the method selector have visible, connected labels.
• Field errors use aria-invalid and aria-describedby.
• Destination icons are decorative; text names the withdrawal method.
• Dialogs use the design system's focus handling and return focus to their opening action.
• Verification uses Notice and success uses Snackbar to announce feedback.
• The balance is connected to its label with aria-labelledby.
• Method changes keep the entered amount. Information and errors are conveyed in text as well as colour.

Implementation

The block composes Input, Field, Select, Button, Dialog, Notice and Snackbar from @svs/ui. Mock responses live in mocks/withdrawal.ts, separate from the form and presentation components. The Code tab shows the files that run in the preview.

The example uses a fixed balance and masked placeholders for the mobile number and bank account. The placeholder mobile number is accepted in the simulated Swish flow. Editing bank details starts with empty fields instead of the masked values.

Positive amounts with up to two decimal places, Swedish mobile-number syntax and basic bank-field lengths illustrate validation feedback. Bank ownership, bank-specific validation, withdrawal limits, restrictions, persistence and Swish polling must come from the application's services. Use the application's rules and transfer times when integrating the pattern.