Skip to main content

Components

Forms

CheckboxCheckbox

Checkbox

Use this component when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.

ChoiceListChoiceList

ChoiceList

Use this component if you need to group together a related list of interactive choices as radio buttons or checkboxes.

ColorPickerColorPicker

ColorPicker

Use this component if you need to select a color.

DateFieldDateField

DateField

This is a form field that lets users select a date using the DatePicker component.

DatePickerDatePicker

DatePicker

Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.

EmailFieldEmailField

EmailField

Use this when you need users to provide their email addresses.

FormForm

Form

Use this component when you want to collect input from users. It provides a structure for various input fields and controls, such as text fields, checkboxes, and buttons. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.

FunctionSettingsFunctionSettings

FunctionSettings

FunctionSettings should be used when configuring the metafield configuration of a Shopify Function. It provides a structure for various input fields and controls, such as text fields, checkboxes, and selections. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.

MoneyFieldMoneyField

MoneyField

This is the right component for letting users enter Money digits.

NumberFieldNumberField

NumberField

This component is specifically designed for numeric data entry.

PasswordFieldPasswordField

PasswordField

This component is for secure input, it obfuscates any text that users enter.

SelectSelect

Select

Use this when you want to give users a predefined list of options to choose from.

TextAreaTextArea

TextArea

This component is perfect when you need to allow users to input larger amounts of text, such as for comments, feedback, or any other multi-line input.

TextFieldTextField

TextField

This is your go-to component when you need to let users input textual information.

URLFieldURLField

URLField

This is the right component for letting users enter a URL.