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

Toggle

The Toggle Field is a boolean toggle. You can set its value for content that needs a true and or false state.

Toggle Field
{
  component: 'toggle',
  name: 'toggleName',
  label: 'Toggle Field',
  description: 'A toggle field',
  toggleLabels: {
    true: 'Enable',
    false: 'Disable',
  },
  defaultValue: true,
}

Key

Type

Required

Description

component

string

yes

The name of the field component. (toggle)

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.

toggleLabels

string

no

An object that you use to label your true and false values. { true: string, false: string }

defaultValue

boolean

no

This will be either true or false.

PreviousGroup ListNextSelect

Last updated 2 years ago