Sort code input
Live demo
Design
Usage
The Sort code input component is the interactive component used to capture a user’s UK bank sort code. It consists of a field, a bank icon and helper text.
Specs
The sort code input height is constructed based on the ‘Field input‘ text style and padding.
The bank icon sits within the sort code input and it is visible all the time. It is constructed using one SVG icons drawn at size L [32px] and and grey background.
The width of the sort code input is flexible, unless specifically constrained by a defined value or alignment. The width of the form field should match the width of the field label text box across all viewport sizes, unless otherwise specified.
The form field has a 1px border with 4px rounded corners to be consistent with the buttons.
When text is entered/displayed in the form field it uses the ‘Field input’ style (16px) across all viewports. It is not proposed to display a disabled state for an empty field. If a field is not required it should be hidden.
Behaviour
The state of the sort code input changes depending on the actions of the user.
The component works as a combination of text input and icon. The user is able to type into the field. When the user enters the sort code number a sort code number is recognised, the identified bank logo will replace the bank icon.
When the user is typing the sort code, the digits will split automatically into pairs by hyphens [even if the user doesn’t enter hyphens]
The length of the sort code should be 6 digits + 2 hyphens = 8 symbols. The user won’t be allowed to type more than 6 digits.
The sort code input should employ existing behaviour native to inputs.
Accessibility
The focused state is used to help accessibility and is consistent with the focus state used on other components. Use the appropriate aria attributes for screen readers where applicable.
The ‘Text’ style colour used on entered text in the field, is comfortably within the AAA contrast ratio for legibility.
Placeholder text will not be used within text fields. Placeholder text has to be dark enough to pass AA rating for legibility. It can confuse users who may think the field is already completed. When a detailed description or an example is required to complement a field label, ‘Helper text’ will be used.
Code
import { SortCodeInput } from '@shieldpay/bumblebee/sort-code-input'; <SortCodeInput name="someInput4" label="I am a text input with some help and an error" helpText="Example: name@domain.com" error="Oops, that's not right" onChange={(value) => setValue2(value)} value={value2} />;