Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Disclosure

The disclosure component creates expandable content sections that customers can show or hide. Use disclosure to place long content blocks behind toggle controls like buttons, links, or switches.

The component automatically applies the WAI-ARIA Accordion pattern for accessibility.

Support
Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the Disclosure component.

Anchor to defaultOpen
defaultOpen
< | undefined>

For uncontrolled disclosure components, the default open state on the initial render.

It's possible to specify a boolean value, a string value, or an array of string values:

  • true will expand all content
  • false will collapse all content
  • string will expand the content with the matching id
  • string[] will expand the content with the matching ids
Anchor to onToggle
onToggle
(open: string[]) => void

A callback fired when the open state of the disclosure changes.

Anchor to open
open

For controlled disclosure components, the open state. The open prop should be used along with onToggle to create a controlled disclosure component.

Anchor to transition
transition
'none'

Set to 'none' to disable the default transition animation.

Anchor to ExamplesExamples

Anchor to Create an expandable sectionCreate an expandable section

Hide content behind a toggle that customers can expand on demand. This example uses a button activator to reveal a hidden content block.

Create an expandable section

A disclosure component with a button activator that expands to show hidden content

Create an expandable section

import {
reactExtension,
Disclosure,
Button,
View,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.page.render',
() => <Extension />,
);

function Extension() {
return (
<Disclosure>
<Button toggles="one">Toggle</Button>
<View id="one">Content</View>
</Disclosure>
);
}
import {
extension,
Button,
View,
Disclosure,
} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
const disclosure = root.createComponent(Disclosure, {}, [
root.createComponent(Button, {toggles: 'one'}, 'Toggle'),
root.createComponent(
View,
{border: 'base', padding: 'base', id: 'one'},
'Content',
),
]);

root.appendChild(disclosure);
});

Anchor to Combine disclosure with layout componentsCombine disclosure with layout components

Use disclosure with inline and block layout components to organize expandable content. This example shows how to reveal structured information when the customer requests it.

Combine disclosure with layout components

A disclosure component combined with inline and block layout components to organize expandable content

Combine disclosure with layout components

import {
reactExtension,
View,
Image,
Icon,
Pressable,
Disclosure,
InlineLayout,
BlockStack,
Text,
Form,
TextField,
Button,
Divider,
InlineStack,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <DisclosureAndAlignment />,
);

export const DisclosureAndAlignment = () => {
const openIds = ['one'];
return (
<View
maxInlineSize={400}
cornerRadius="large"
border="base"
>
<BlockStack spacing="none">
<Disclosure
defaultOpen="one"
onToggle={(open) =>
console.log('onToggle event', open)
}
>
<Pressable toggles="one" padding="base">
<InlineLayout
blockAlignment="center"
spacing="base"
columns={['auto', 'fill', 'auto']}
>
<Icon
source="gift"
appearance="subdued"
/>
Gift message
<Icon
source={
openIds.includes('one')
? 'chevronUp'
: 'chevronDown'
}
appearance="subdued"
/>
</InlineLayout>
</Pressable>
<View
id="one"
padding={[
'none',
'base',
'base',
'base',
]}
>
<Form
onSubmit={() =>
console.log('onSubmit event')
}
>
<BlockStack>
<InlineLayout
columns={['fill', 'fill']}
spacing="base"
>
<TextField
label="From"
name="from0"
id="from0"
/>
<TextField
label="To"
name="to0"
id="to0"
/>
</InlineLayout>
<TextField
label="Message"
name="message0"
id="message0"
/>
<View>
<Button
accessibilityRole="submit"
kind="secondary"
>
Save
</Button>
</View>
</BlockStack>
</Form>
</View>
</Disclosure>
<Divider />
<InlineLayout
blockAlignment="baseline"
spacing="base"
columns={['auto', 'fill', 'auto']}
padding="base"
>
<Icon
source="profile"
appearance="subdued"
/>
<BlockStack spacing="none">
<InlineStack blockAlignment="center">
<Text>Verify with</Text>
<Image source="https://via.placeholder.com/50x15" />
</InlineStack>
<Text
appearance="subdued"
size="small"
>
15% savings for students and
military
</Text>
</BlockStack>
<Pressable to="https://www.shopify.com">
<Icon
source="external"
appearance="subdued"
/>
</Pressable>
</InlineLayout>
</BlockStack>
</View>
);
};
import {
extension,
BlockStack,
View,
InlineLayout,
InlineStack,
Image,
Pressable,
Icon,
Text,
TextField,
Form,
Button,
Disclosure,
Divider,
} from '@shopify/ui-extensions/checkout';

export default extension(
'purchase.checkout.block.render',
(root) => {
const openIds = ['one'];

const pressable = root.createComponent(
Pressable,
{
toggles: 'one',
padding: 'base',
},
[
root.createComponent(
InlineLayout,
{
blockAlignment: 'center',
spacing: 'base',
columns: ['auto', 'fill', 'auto'],
},

Anchor to Best practicesBest practices

  • Use clear toggle labels: Make activator text describe what will be revealed.
  • Default to collapsed: Keep disclosure closed unless content is essential.
  • Use appropriate activators: Use buttons for actions, switches for settings, checkboxes for opt-ins.

Anchor to LimitationsLimitations

  • The activator must be an action component (Button, Link, Pressable) or form control (Checkbox, Switch).
  • Content must be wrapped in a structure component (View, BlockStack, Grid, etc.).
Was this page helpful?