Pack Documentation
  • Welcome to the Pack!
  • Guides
    • Getting started
    • Creating your first Storefront
    • Previewing your Storefront
    • Editing your Storefront
    • Scheduling Content
    • Start developing
  • Fundamentals
    • Organization
    • Storefronts
    • Customizer
  • For Merchants
    • Creating Organizations
    • Creating Storefronts
    • Deploys
    • Product Bundles
    • Product Groupings
    • Inviting Teammates
    • Redirects
    • Editing Storefront Settings
  • For Marketers
    • Creating Pages
    • Sections
    • Publishing/Unpublishing
    • Managing Media
  • For Developers
    • Storefront Hooks
      • Settings Hooks
      • Page Hooks
      • Product Hooks
      • Collection Hooks
      • Blog Hooks
      • Article Hooks
    • Section API
      • Schema
      • Fields
        • Text
        • Color
        • Text Area
        • Markdown
        • Image
        • Number
        • Link
        • Product
        • Product Bundle
        • HTML
        • Group
        • List
        • Group List
        • Toggle
        • Select
        • Radio Group
        • Tags
    • Creating Storefront Settings
    • Shopify Hooks
      • Cart
        • useCart
        • useCartClear
        • useCartCheckout
        • useCartUpdateNote
        • useCartAddItems
        • useCartUpdateItems
        • useCartRemoveItems
        • useCartAddAttributes
        • useCartUpdateAttributes
        • useCartRemoveAttributes
        • useCartAddDiscount
        • useCartRemoveDiscount
        • useCartAddGiftCard
        • useCartRemoveGiftCard
      • Customer
        • useCustomer
        • useCustomerCreate
        • useCustomerLogin
        • useCustomerLogout
        • useCustomerCreateAddress
        • useCustomerUpdateAddress
        • useCustomerDeleteAddress
        • useCustomerUpdateDetails
        • useCustomerRecoverPassword
        • useCustomerResetPassword
      • Hydrogen Framework
    • Asynchronous Hooks
    • Pack API
      • Queries
    • Transform Specification
    • Adding Tailwind CSS
Powered by GitBook
On this page
  1. For Developers
  2. Section API
  3. Fields

Select

This is a select / dropdown input field. It will return the value of your selected option.

Select Field
{
  component: 'select',
  name: 'selectName',
  label: 'Select Field',
  description: 'A select field',
  options: [
    {
      label: 'Yes',
      value: 'yesValue'
    },
    {
      label: 'Maybe',
      value: 'maybeValue'
    },
    {
      label: 'No',
      value: 'noValue'
    },
  ],
  defaultValue: 'noValue',
}

Key

Type

Required

Description

component

string

yes

The name of the field component. (select)

name

string

yes

The name of the field that will be accessible by the cms prop of the component.

label

string

no

A human-readable label for the field.

description

string

no

A short description of the setting scope.

options

Array<Option | string>

no

An array of strings, ot an array of Option objects. { value: string, label: string }

defaultValue

string

no

This will be the value of your select values.

PreviousToggleNextRadio Group

Last updated 2 years ago