---
title: Divider
description: >-
  The divider component creates clear visual separation between elements in the
  interface. Use divider to separate distinct content groups in forms, settings
  panels, lists, or page sections, helping buyers scan and understand content
  organization.
api_version: 2026-04
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/divider
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/divider.md
---

# Divider

The divider component creates clear visual separation between elements in the interface. Use divider to separate distinct content groups in forms, settings panels, lists, or page sections, helping buyers scan and understand content organization.

Dividers support both horizontal and vertical orientations. For more structured content grouping with headings, use [section](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/section).

Dividers are purely decorative — they don't carry semantic meaning and aren't announced by assistive technologies. For accessible content regions, use [section](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/section).

### Support Targets (29)

### Supported targets

* [purchase.​checkout.​actions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/navigation#navigation-target)
* [purchase.​checkout.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/block#block-target)
* [purchase.​checkout.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#line-item-targets)
* [purchase.​checkout.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#checkout-cart-line-list-)
* [purchase.​checkout.​contact.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/information#information-target)
* [purchase.​checkout.​delivery-address.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-delivery-address-)
* [purchase.​checkout.​delivery-address.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#delivery-address-targets)
* [purchase.​checkout.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/footer#footer-target)
* [purchase.​checkout.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/header#header-target)
* [purchase.​checkout.​payment-method-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/payment#render-after-payment-methods-)
* [purchase.​checkout.​payment-method-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/payment#payment-targets)
* [purchase.​checkout.​pickup-location-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#render-after-pickup-locations-)
* [purchase.​checkout.​pickup-location-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#location-list-targets)
* [purchase.​checkout.​pickup-location-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#location-option-item-target)
* [purchase.​checkout.​pickup-point-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/pickup-points#render-after-pickup-points-)
* [purchase.​checkout.​pickup-point-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/pickup-points#pickup-points-targets)
* [purchase.​checkout.​reductions.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#checkout-reductions-after-)
* [purchase.​checkout.​reductions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#reductions-targets)
* [purchase.​checkout.​shipping-option-item.​details.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#shipping-option-item-targets)
* [purchase.​checkout.​shipping-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-shipping-option-)
* [purchase.​checkout.​shipping-option-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-shipping-options-)
* [purchase.​checkout.​shipping-option-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#shipping-option-list-targets)
* [purchase.​thank-you.​announcement.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/announcement#thank-you-announcement-)
* [purchase.​thank-you.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/block#block-target)
* [purchase.​thank-you.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/order-summary#line-item-targets)
* [purchase.​thank-you.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/order-summary#thank-you-cart-line-list-)
* [purchase.​thank-you.​customer-information.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/information#information-target)
* [purchase.​thank-you.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/footer#footer-target)
* [purchase.​thank-you.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/header#header-target)

#### Use cases

* **Content separation**: Draw visible boundaries between distinct content groups in forms, lists, or checkout flows
* **Inline partitioning**: Separate side-by-side elements with a vertical rule using `direction="block"`

***

## Properties

Configure the following properties on the divider component.

* **direction**

  **'inline' | 'block'**

  **Default: 'inline'**

  The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).

  * `inline`: A horizontal divider that separates content stacked vertically.
  * `block`: A vertical divider that separates content arranged horizontally. Requires a parent with a defined height to render visibly.

* **id**

  **string**

  A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

***

## Examples

### Insert a default horizontal divider

Insert a horizontal rule between content groups. This example places a default `s-divider` between a section label and its supporting text.

## Insert a default horizontal divider

![A rendered example of the divider component](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/divider-default-C1pKEu0e.png)

## html

```html
<s-divider></s-divider>
```

### Separate inline content with a vertical divider

Draw a vertical rule between side-by-side items. This example places `direction="block"` on `s-divider` inside an inline stack to separate subtotal and tax labels.

## html

```html
<s-stack direction="inline" gap="small" alignItems="center">
  <s-text>Subtotal</s-text>
  <s-divider direction="block"></s-divider>
  <s-text>Estimated tax</s-text>
</s-stack>
```

### Add a horizontal divider between inline items

Add a horizontal rule between side-by-side items. This example places `direction="inline"` on `s-divider` between two text elements inside an inline stack.

## html

```html
<s-stack direction="inline" gap="base" alignItems="center">
  <s-text>Subtotal</s-text>
  <s-divider direction="inline"></s-divider>
  <s-text>$49.99</s-text>
</s-stack>
```

***

## Best practices

* **Use dividers sparingly**: Too many dividers can make a page feel cluttered. Rely on spacing and grouping first, and add dividers only where content boundaries aren't clear from layout alone.
* **Match direction to layout axis**: Use `direction="block"` in vertical stacks and `direction="inline"` in horizontal rows.
* **Prefer sections for labeled groups**: If the content groups have headings, use [section](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/section) instead of raw dividers for better semantics and accessibility.

***