Skip to main content

Components

Forms

CheckboxCheckbox

Checkbox

Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions.

ChoiceChoice

Choice

Options inside a ChoiceList. The wrapping ChoiceList component will dictate if the choice renders as radio buttons or checkboxes.

ChoiceListChoiceList

ChoiceList

Use choice lists to present a list of choices where buyers can make a single selection or multiple selections.

ConsentCheckboxConsentCheckbox

ConsentCheckbox

Use buyer consent checkboxes for collecting the buyer's approval for a given policy.

ConsentPhoneFieldConsentPhoneField

ConsentPhoneField

Display a phone field for customers to sign up for text message marketing, noting that the phone field value will be automatically saved during checkout.

DateFieldDateField

DateField

Use a date field to get a date input from a customer.

DatePickerDatePicker

DatePicker

The DatePicker component is a calendar picker UI that allows users to select a single date or a date range

DropZoneDropZone

DropZone

DropZone allows file uploads through drag-and-drop functionality into a designated area on a page, or by activating a button. At present, DropZone does not offer image upload preview capabilities. The use of object URLs directly in an image component is not possible due to the extension and host operating on separate domains. Any element focused within the Dropzone component, including child elements such as the 'Add file' button, will initiate the file selector when the Enter or Spacebar key is pressed.

FormForm

Form

The form component should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where customers can submit the form from any input by pressing "Enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible. Unlike an HTML form element, this component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an onSubmit callback that will perform the necessary HTTP requests in JavaScript.

PhoneFieldPhoneField

PhoneField

A PhoneField is an input field that merchants can type into optimized for phone numbers with a country code base auto-formatting. The country code is required for the initial render of the field but it can be overriden later by the user either by selecting a country in the country selection dropdown or by manually editing the country phone code directly in the text field.

SelectSelect

Select

Selects let buyers choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.

StepperStepper

Stepper

Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2.

SwitchSwitch

Switch

Use a switch to represent an on or off state that takes effect immediately when tapped.

TextFieldTextField

TextField

Use a text field to get text input from a customer.

ToggleButtonToggleButton

ToggleButton

Options inside a ToggleButtonGroup.

ToggleButtonGroupToggleButtonGroup

ToggleButtonGroup

ToggleButtonGroup allows you to make a single choice out of the number of options provided. This is similar to the ChoiceList component, but without controls such as checkbox or radio button. You can utilize our layout components to arrange ToggleButtonGroup.

Overlays

ChatChat

Chat

Use the Chat component to create real-time chat applications.

ModalModal

Modal

Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed. They must be specified inside the overlay prop of an activator component (Button, Link or Pressable). The library automatically applies the WAI-ARIA Dialog pattern to both the activator and the modal content.

PopoverPopover

Popover

Popovers are similar to tooltips. They are small overlays that open on demand after a user interaction. The difference is that the popover can contain more content, without cluttering the page. They must be specified inside the overlay prop of an activator component (Button, Link or Pressable). The library automatically applies the WAI-ARIA Popover Widget pattern to both the activator and the popover content.

SheetSheet

Sheet

The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting customers during checkout. This component requires access to Customer Privacy API to be rendered. The library automatically applies the WAI-ARIA Dialog pattern to both the activator and the sheet content.

TooltipTooltip

Tooltip

Tooltips are floating labels that briefly explain the function of a user interface element. They must be specified inside the overlay prop of an activator component. Currently, activator components are Button, Link, and Pressable. The library automatically applies the WAI-ARIA Tooltip Widget pattern to both the activator and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator.

Structure

BlockLayoutBlockLayout

BlockLayout

BlockLayout is used to lay out content over multiple rows. By default, all rows fill the available block space, sharing it equally.

BlockSpacerBlockSpacer

BlockSpacer

BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements. Note that you should favor BlockStack when spacing between all elements is the same.

BlockStackBlockStack

BlockStack

BlockStack is used to vertically stack elements.

DividerDivider

Divider

A divider separates content and represents a thematic break between elements.

GridGrid

Grid

Grid is used to lay out content in a matrix of rows and columns.

GridItemGridItem

GridItem

GridItem can be used as children of Grid. It offers a way to span the element across a number of columns and rows.

InlineLayoutInlineLayout

InlineLayout

InlineLayout is used to lay out content over multiple columns. By default, all columns are of equal size and fill the available inline space. Content does not wrap on new rows when not enough columns have been explicitly set, instead they are added as new column and fill the remaining inline space.

InlineSpacerInlineSpacer

InlineSpacer

InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements. Note that you should favor InlineStack when spacing between all elements is the same.

InlineStackInlineStack

InlineStack

InlineStack is used to lay out a horizontal row of elements. Elements always wrap.

ScrollViewScrollView

ScrollView

ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view.

ViewView

View

View is a generic container component. Its contents will always be their “natural” size, so this component can be useful in layout components (like Grid, BlockStack, InlineStack) that would otherwise stretch their children to fit.