Checkbox Input

The Checkbox Input creates a single checkbox for customer confirmations, opt-ins, age verification, terms acceptance, or any yes/no choice requiring explicit customer acknowledgment.

desc - Create checkboxes for confirmations, opt-ins, age verification, and terms acceptance.

Description

The Checkbox Input component creates a single checkbox for binary (yes/no) choices, customer confirmations, opt-ins, or acknowledgments. This component is perfect for scenarios requiring explicit customer consent, optional add-ons, or mandatory acknowledgments. Checkboxes can be required to block checkout completion if not checked, making them essential for legal compliance, age verification, or terms acceptance.

Sample Use Cases

Ideal Scenarios

• Optional add-ons: Gift wrapping, special packaging, rush processing
• Marketing consent: Newsletter opt-ins, SMS notifications
• Legal acknowledgments: Age verification, terms acceptance, policy agreements
• Binary choices: Yes/no questions, enable/disable options
• Order preferences: Special handling, gift receipts, delivery instructions
• Upsells: Simple one-click product additions
• Confirmations: Customer acknowledgments or permissions

Not Recommended For

• Multiple options: Use Radio Buttons or Dropdown for selecting one from many
• Quantity selection: Use number input or dropdown
• Date selection: Use Date Picker
• Free-text input: Use Text Input Field
• 2+ mutually exclusive options: Use Radio Buttons

Display Rules

Supports advanced display rules for conditional rendering. See Display Rules System documentation for details.

Display Styles

Banner Style (Prominent)

• Appearance: Checkbox with colored background box, larger and more prominent
• Visual: Full-width container with background color, padding, and border
• Best For:
  • Important acknowledgments needing attention
  • Legal or compliance checkboxes
  • Required confirmations
  • High-value opt-ins
  • Age verification
  • Terms acceptance
• Example Use: Age verification requiring customer attention

Inline Style (Subtle)

• Appearance: Simple checkbox with label, minimal styling
• Visual: Compact, text-like appearance blending with form
• Best For:
  • Optional preferences
  • Non-critical opt-ins
  • Multiple checkboxes in sequence
  • Subtle additions
  • Marketing consent
• Example Use: "Email me order updates" opt-in

Configuration Options

Required Validation

Mark checkbox as required:

✅ Required: Checkbox must be checked to proceed

Use for:
- Terms and conditions
- Age verification
- Mandatory acknowledgments
- Legal compliance

⚠️ Careful: Required checkboxes can frustrate customers
Only use when truly necessary

Label Text

Clear, concise label that explains what customer is agreeing to:

✅ Good Examples:
"Add gift wrapping ($5)"
"I am at least 21 years old"
"I agree to the terms and conditions"
"This is a gift - include gift receipt"

❌ Avoid:
"Checkbox"
"Click here"
"Yes"

Help Text

Additional context or legal language:

Examples:
"By checking this box, you consent to receive marketing emails"
"Gift wrapping includes premium paper, ribbon, and card"
"You must be 21 or older to purchase this product"
"See our privacy policy for details on data usage"

Common Use Cases

Gift Wrap Add-On

Style: Banner
Label: "Add gift wrapping ($5)"
Help Text: "Beautiful wrapping paper with ribbon and gift tag included"
Required: No
Default: Unchecked

Integration: Can trigger additional input fields (gift message) when checked

Marketing Consent

Style: Inline
Label: "I'd like to receive promotional emails and exclusive offers"
Help Text: "You can unsubscribe at any time. View our privacy policy."
Required: No
Default: Unchecked

Compliance: GDPR/CAN-SPAM compliant opt-in

Age Verification

Style: Banner
Label: "I confirm I am 21 years of age or older"
Help Text: "This product is age-restricted. You may be asked for ID upon delivery."
Required: Yes
Default: Unchecked

Enforcement: Blocks checkout if not checked

Terms Acceptance

Style: Inline
Label: "I agree to the Terms of Service and Privacy Policy"
Help Text: Links to full terms documents
Required: Yes
Default: Unchecked

Legal: Standard for services/subscriptions

Order Customization

Style: Inline
Label: "This order contains custom/personalized items"
Help Text: "Custom items are non-returnable and require 5-7 business days"
Required: No
Default: Unchecked

Impact: Can trigger additional input fields or workflows

Special Handling

Style: Banner
Label: "Requires special handling - fragile items"
Help Text: "Adds $10 for specialized packaging and careful handling"
Required: No
Default: Unchecked

Fee: Can add surcharge when checked

Best Practices

1. Clear Value Proposition

✅ "Add gift wrapping ($5) - includes premium paper, ribbon, and card"
❌ "Gift wrap - $5"

✅ "I'd like marketing emails (exclusive deals and early access)"
❌ "Send me emails"

2. Honest Defaults

✅ Marketing opt-ins: Default UNCHECKED (honest consent)
✅ Gift options: Default UNCHECKED (avoid surprise charges)
✅ Age verification: Default UNCHECKED (explicit confirmation)

❌ Pre-checked marketing consent (deceptive)
❌ Pre-checked paid add-ons (surprise charges)

3. Required Only When Necessary

Appropriate for "Required":
✅ Legal compliance (age verification)
✅ Terms acceptance
✅ Safety acknowledgments
✅ Mandatory product handling

Avoid "Required" for:
❌ Marketing consent
❌ Optional add-ons
❌ Nice-to-have confirmations

4. Use with Conditional Logic

Powerful patterns:
"This is a gift" → Shows gift message field
"Custom engraving" → Shows text input for engraving
"Add insurance" → Shows insurance value dropdown
"Corporate order" → Shows company tax ID field

Storage Options

Checkbox state can be stored as:

1. Order Attributes: "gift_wrap": "true" or "gift_wrap": "false"
2. Order Notes: "Customer requested gift wrapping"
3. Metafields: Boolean value for programmatic use

See Input Components Guide for detailed storage information and how to access collected data.

Checkbox vs Radio Buttons

Use Checkbox When:

✅ Single yes/no choice
✅ Optional selection
✅ Can be unchecked
✅ Independent from other choices

Use Radio Buttons When:

✅ Multiple mutually exclusive options
✅ Must select one option
✅ 2-5 choices available
✅ Options are related