Shared Checkout Components

Text Fields

Text Fields

Default with focus

Phone number (Optional)

To recieve text updates

font-size: 16px; border: 1px solid #909090;
Error with focus

Phone number (Optional)

To recieve text updates

Please complete the field

Disable input field

Phone number (Optional)

To recieve text updates

border: 1px solid #909090; background: #f1f1f1;

Text Area

Text Area

Default with focus

Phone number (Optional)

To recieve text updates

255 characters remaining

font-size: 16px;
Error with focus

Phone number (Optional)

To recieve text updates

255 characters remaining

To send a message please complete this field

color: #D8000C;

Dropdown

Dropdown

Default Dropdown

Delivery Address

font-size: 16px;

Radio buttons

Radio buttons

Default with focus radio button

Select an Option

Disabled radio button

Select an Option

font-size: 16px;

Check boxes

check boxes

Default checkbox

Include the following

Disabled checkbox

Include the following

Error checkbox

Include the following

Please accept the terms and conditions

Buttons

Primary Button with hover and foucs effects
Shop Now
// or
@include button;
button
Primary Button with disabled effect
Shop Now
// or
button--disabled
secondary Button with hover and foucs effects
Shop Now
// or
@include button--light;
button button--light
Secondary Button with disabled effect
Shop Now
// or
@include button--pink;
button button--pink
Disabled Button
Shop Now
// or
@include button;
button button--disabled
tertiary link
Button Label
@include link--tertiary;
link--tertiary

Text Message

Text Message

Error Message

There are 4 errors below, please contact them and try again

Go to first message
color: #D8000C;
Inofrmation message

We are currently experiencing delivery delays. Find out more

color: #007CE1;
Success message

Your order has been Successfully placed

color: #67C100;

Forms

Accessibility Requirement

  • All form fields must have a label. If none is provided please provide a title and aria-label to your input fields

See: https://www.w3.org/WAI/tutorials/forms/

Toggle
Code
TOP