Input field

Live demo Design Code

Live demo

Static fields

I am a disabled input field

I am a input field with multiple error messages

I am a disabled input field with an extra icon

I am a readonly input field

Live fields (using Conform library)

Design

Usage

The input field component (form field) is the interactive component used to capture information. The form field is used with the field label component and the helper text component if required.

All form fields are based on the ‘master primitive’ component (inactive state). If any of the layers or details within the master component are changed, all form instances will be updated.

Anatomy

The form field height is constructed based on the ‘Field input‘ text style and padding. It retains a height of 52px across all viewports.

The width of the form field 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 form field changes depending on the actions of the user. The structure of how the instances behave are outlined, right.

Transition to display a state change with a 0.25 ease.

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 { InputField } from '@shieldpay/bumblebee/input-field';

<InputField
  name="someInput4"
  label="I am a text input with some help and an error"
  helpText="Example: name@domain.com"
  validation={{ messages: ["Oops, that's not right"], valid: false }}
  showValidation
  onChange={(value) => setValue2(value)}
  value={value2}
/>;