{"abstract":[{"text":"Disclosure controls reveal and hide information and functionality related to specific controls or views.","type":"text"}],"hierarchy":{"paths":[["doc:\/\/com.apple.documentation\/documentation\/technologies","doc:\/\/com.apple.HIG\/design\/human-interface-guidelines","doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/components","doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/layout-and-organization"]]},"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/disclosure-controls"},"kind":"article","legalNotices":{"copyright":"Copyright © 2026 Apple Inc. All rights reserved.","privacyPolicy":"https:\/\/www.apple.com\/privacy\/privacy-policy","termsOfUse":"https:\/\/www.apple.com\/legal\/internet-services\/terms\/site.html"},"metadata":{"availableLanguages":["en-US","zh-CN","ja-JP","ko-KR"],"customMetadata":{"supported-platforms":"ios,ipados,macos,visionos"},"images":[{"identifier":"components-disclosure-controls-thumbnail.png","type":"card"}],"role":"article","title":"Disclosure controls"},"primaryContentSections":[{"content":[{"inlineContent":[{"identifier":"components-disclosure-control-intro.png","type":"image"}],"type":"paragraph"},{"anchor":"Best-practices","level":2,"text":"Best practices","type":"heading"},{"inlineContent":[{"inlineContent":[{"text":"Use a disclosure control to hide details until they’re relevant.","type":"text"}],"type":"strong"},{"text":" Place controls that people are most likely to use at the top of the disclosure hierarchy so they’re always visible, with more advanced functionality hidden by default. This organization helps people quickly find the most essential information without overwhelming them with too many detailed options.","type":"text"}],"type":"paragraph"},{"anchor":"Disclosure-triangles","level":2,"text":"Disclosure triangles","type":"heading"},{"inlineContent":[{"text":"A disclosure triangle shows and hides information and functionality associated with a view or a list of items. For example, Keynote uses a disclosure triangle to show advanced options when exporting a presentation, and the Finder uses disclosure triangles to progressively reveal hierarchy when navigating a folder structure in list view.","type":"text"}],"type":"paragraph"},{"tabs":[{"content":[{"inlineContent":[{"identifier":"disclosure-triangle-before.png","type":"image"}],"type":"paragraph"}],"title":"Collapsed"},{"content":[{"inlineContent":[{"identifier":"disclosure-triangle-after.png","type":"image"}],"type":"paragraph"}],"title":"Expanded"}],"type":"tabNavigator"},{"inlineContent":[{"text":"A disclosure triangle points inward from the leading edge when its content is hidden and down when its content is visible. Clicking or tapping the disclosure triangle switches between these two states, and the view expands or collapses accordingly to accommodate the content.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Provide a descriptive label when using a disclosure triangle.","type":"text"}],"type":"strong"},{"text":" Make sure your labels indicate what is disclosed or hidden, like “Advanced Options.”","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"For developer guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/AppKit\/NSButton\/BezelStyle-swift.enum\/disclosure","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"anchor":"Disclosure-buttons","level":2,"text":"Disclosure buttons","type":"heading"},{"inlineContent":[{"text":"A disclosure button shows and hides functionality associated with a specific control. For example, the macOS Save sheet shows a disclosure button next to the Save As text field. When people click or tap this button, the Save dialog expands to give advanced navigation options for selecting an output location for their document.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"A disclosure button points down when its content is hidden and up when its content is visible. Clicking or tapping the disclosure button switches between these two states, and the view expands or collapses accordingly to accommodate the content.","type":"text"}],"type":"paragraph"},{"tabs":[{"content":[{"inlineContent":[{"identifier":"disclosure-button-before.png","type":"image"}],"type":"paragraph"}],"title":"Collapsed"},{"content":[{"inlineContent":[{"identifier":"disclosure-button-after.png","type":"image"}],"type":"paragraph"}],"title":"Expanded"}],"type":"tabNavigator"},{"inlineContent":[{"inlineContent":[{"text":"Place a disclosure button near the content that it shows and hides.","type":"text"}],"type":"strong"},{"text":" Establish a clear relationship between the control and the expanded choices that appear when a person clicks or taps a button.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Use no more than one disclosure button in a single view.","type":"text"}],"type":"strong"},{"text":" Multiple disclosure buttons add complexity and can be confusing.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"For developer guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/AppKit\/NSButton\/BezelStyle-swift.enum\/pushDisclosure","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"anchor":"Platform-considerations","level":2,"text":"Platform considerations","type":"heading"},{"inlineContent":[{"inlineContent":[{"text":"No additional considerations for macOS. Not supported in tvOS or watchOS.","type":"text"}],"type":"emphasis"}],"type":"paragraph"},{"anchor":"iOS-iPadOS-visionOS","level":3,"text":"iOS, iPadOS, visionOS","type":"heading"},{"inlineContent":[{"text":"Disclosure controls are available in iOS, iPadOS, and visionOS with the SwiftUI ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/SwiftUI\/DisclosureGroup","isActive":true,"type":"reference"},{"text":" view.","type":"text"}],"type":"paragraph"},{"anchor":"Resources","level":2,"text":"Resources","type":"heading"},{"anchor":"Related","level":4,"text":"Related","type":"heading"},{"inlineContent":[{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/outline-views","isActive":true,"type":"reference"}],"type":"paragraph"},{"inlineContent":[{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/lists-and-tables","isActive":true,"type":"reference"}],"type":"paragraph"},{"inlineContent":[{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/buttons","isActive":true,"type":"reference"}],"type":"paragraph"},{"anchor":"Developer-documentation","level":4,"text":"Developer documentation","type":"heading"},{"inlineContent":[{"identifier":"doc:\/\/com.apple.documentation\/documentation\/SwiftUI\/DisclosureGroup","isActive":true,"type":"reference"},{"text":" — SwiftUI","type":"text"}],"type":"paragraph"},{"inlineContent":[{"identifier":"doc:\/\/com.apple.documentation\/documentation\/AppKit\/NSButton\/BezelStyle-swift.enum\/disclosure","isActive":true,"type":"reference"},{"text":" — AppKit","type":"text"}],"type":"paragraph"},{"inlineContent":[{"identifier":"doc:\/\/com.apple.documentation\/documentation\/AppKit\/NSButton\/BezelStyle-swift.enum\/pushDisclosure","isActive":true,"type":"reference"},{"text":" — AppKit","type":"text"}],"type":"paragraph"},{"anchor":"Videos","level":4,"text":"Videos","type":"heading"},{"items":["doc:\/\/com.apple.documentation\/videos\/play\/wwdc2020\/10031"],"style":"compactGrid","type":"links"}],"kind":"content"}],"schemaVersion":{"major":0,"minor":3,"patch":0},"sections":[],"topicSectionsStyle":"compactGrid","references":{"1636D358-5C36-4027-B204-81FFE4D05B7D":{"alt":null,"identifier":"1636D358-5C36-4027-B204-81FFE4D05B7D","type":"image","variants":[{"traits":["1x"],"url":"https:\/\/devimages-cdn.apple.com\/wwdc-services\/images\/49\/1636D358-5C36-4027-B204-81FFE4D05B7D\/3455_wide_250x141_1x.jpg"},{"traits":["2x"],"url":"https:\/\/devimages-cdn.apple.com\/wwdc-services\/images\/49\/1636D358-5C36-4027-B204-81FFE4D05B7D\/3455_wide_250x141_2x.jpg"},{"traits":["3x"],"url":"https:\/\/devimages-cdn.apple.com\/wwdc-services\/images\/49\/1636D358-5C36-4027-B204-81FFE4D05B7D\/3455_wide_250x141_3x.jpg"}]},"components-buttons-thumbnail.png":{"alt":"A stylized representation of a button. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-buttons-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-buttons-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-buttons-thumbnail~dark@2x.png"}]},"components-disclosure-control-intro.png":{"alt":"A stylized representation of collapsed and expanded disclosure buttons. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-disclosure-control-intro.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-disclosure-control-intro@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-disclosure-control-intro~dark@2x.png"}]},"components-disclosure-controls-thumbnail.png":{"alt":"A stylized representation of collapsed and expanded disclosure buttons. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-disclosure-controls-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-disclosure-controls-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-disclosure-controls-thumbnail~dark@2x.png"}]},"components-layout-and-organization-thumbnail.png":{"alt":"A stylized representation of a window that's divided into three areas: a toolbar above two side-by-side views, suggesting layout and organization. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-layout-and-organization-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-layout-and-organization-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-layout-and-organization-thumbnail~dark@2x.png"}]},"components-lists-and-tables-thumbnail.png":{"alt":"A stylized representation of a three-row table. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-lists-and-tables-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-lists-and-tables-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-lists-and-tables-thumbnail~dark@2x.png"}]},"components-outline-views-thumbnail.png":{"alt":"A stylized representation of a list of folders and images, displayed in an outline view with their names and modified dates. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-outline-views-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-outline-views-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-outline-views-thumbnail~dark@2x.png"}]},"components.png":{"alt":"","identifier":"components.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components~dark@2x.png"}]},"disclosure-button-after.png":{"alt":"A screenshot of an expanded save dialog in macOS. The dialog includes an open disclosure button that collapses the dialog to hide some options.","identifier":"disclosure-button-after.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/disclosure-button-after@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/disclosure-button-after~dark@2x.png"}]},"disclosure-button-before.png":{"alt":"A screenshot of a collapsed save dialog in macOS. The dialog includes a closed disclosure button that expands the dialog to reveal additional options.","identifier":"disclosure-button-before.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/disclosure-button-before@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/disclosure-button-before~dark@2x.png"}]},"disclosure-triangle-after.png":{"alt":"An illustration of three folders in a Finder list view. The first and third folders are collapsed, with disclosure triangles on their leading edges pointing inward to indicate that they can be expanded to reveal their contents. The second folder is expanded, with its disclosure triangle pointing down, revealing three subfolders inside.","identifier":"disclosure-triangle-after.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/disclosure-triangle-after@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/disclosure-triangle-after~dark@2x.png"}]},"disclosure-triangle-before.png":{"alt":"An illustration of three folders in a Finder list view. The folders are collapsed, with disclosure triangles on their leading edges pointing inward to indicate that they can be expanded to reveal their contents.","identifier":"disclosure-triangle-before.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/disclosure-triangle-before@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/disclosure-triangle-before~dark@2x.png"}]},"doc://com.apple.HIG/design/Human-Interface-Guidelines/buttons":{"abstract":[{"text":"A button initiates an instantaneous action.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/buttons","images":[{"identifier":"components-buttons-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Buttons","type":"topic","url":"\/design\/human-interface-guidelines\/buttons"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/components":{"abstract":[{"text":"Learn how to use and customize system-defined components to give people a familiar and consistent experience.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/components","images":[{"identifier":"overview.svg","type":"icon"},{"identifier":"components.png","type":"card"}],"kind":"article","role":"collectionGroup","title":"Components","type":"topic","url":"\/design\/human-interface-guidelines\/components"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/layout-and-organization":{"abstract":[],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/layout-and-organization","images":[{"identifier":"layout-and-organization.svg","type":"icon"},{"identifier":"components-layout-and-organization-thumbnail.png","type":"card"}],"kind":"article","role":"collectionGroup","title":"Layout and organization","type":"topic","url":"\/design\/human-interface-guidelines\/layout-and-organization"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/lists-and-tables":{"abstract":[{"text":"Lists and tables present data in one or more columns of rows.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/lists-and-tables","images":[{"identifier":"components-lists-and-tables-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Lists and tables","type":"topic","url":"\/design\/human-interface-guidelines\/lists-and-tables"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/outline-views":{"abstract":[{"text":"An outline view presents hierarchical data in a scrolling list of cells that are organized into columns and rows.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/outline-views","images":[{"identifier":"components-outline-views-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Outline views","type":"topic","url":"\/design\/human-interface-guidelines\/outline-views"},"doc://com.apple.HIG/design/human-interface-guidelines":{"abstract":[{"text":"The HIG contains guidance and best practices that can help you design a","type":"text"},{"text":" ","type":"text"},{"text":"great experience for any Apple platform.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/human-interface-guidelines","images":[{"identifier":"human-interface-guidelines-page-image-card.png","type":"card"}],"kind":"article","role":"collection","title":"Human Interface Guidelines","type":"topic","url":"\/design\/human-interface-guidelines"},"doc://com.apple.documentation/documentation/AppKit/NSButton/BezelStyle-swift.enum/disclosure":{"abstract":[{"text":"A bezel style button for use with a disclosure triangle.","type":"text"}],"fragments":[{"kind":"keyword","text":"case"},{"kind":"text","text":" "},{"kind":"identifier","text":"disclosure"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/AppKit\/NSButton\/BezelStyle-swift.enum\/disclosure","kind":"symbol","role":"symbol","title":"NSButton.BezelStyle.disclosure","type":"topic","url":"\/documentation\/appkit\/nsbutton\/bezelstyle-swift.enum\/disclosure"},"doc://com.apple.documentation/documentation/AppKit/NSButton/BezelStyle-swift.enum/pushDisclosure":{"abstract":[{"text":"A bezel style push button with a disclosure triangle.","type":"text"}],"fragments":[{"kind":"keyword","text":"case"},{"kind":"text","text":" "},{"kind":"identifier","text":"pushDisclosure"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/AppKit\/NSButton\/BezelStyle-swift.enum\/pushDisclosure","kind":"symbol","role":"symbol","title":"NSButton.BezelStyle.pushDisclosure","type":"topic","url":"\/documentation\/appkit\/nsbutton\/bezelstyle-swift.enum\/pushdisclosure"},"doc://com.apple.documentation/documentation/SwiftUI/DisclosureGroup":{"abstract":[{"text":"A view that shows or hides another content view, based on the state of a","type":"text"},{"text":" ","type":"text"},{"text":"disclosure control.","type":"text"}],"fragments":[{"kind":"keyword","text":"struct"},{"kind":"text","text":" "},{"kind":"identifier","text":"DisclosureGroup"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/SwiftUI\/DisclosureGroup","kind":"symbol","navigatorTitle":[{"kind":"identifier","text":"DisclosureGroup"}],"role":"symbol","title":"DisclosureGroup","type":"topic","url":"\/documentation\/swiftui\/disclosuregroup"},"doc://com.apple.documentation/documentation/technologies":{"abstract":[],"identifier":"doc:\/\/com.apple.documentation\/documentation\/technologies","kind":"technologies","role":"overview","title":"Technologies","type":"topic","url":"\/documentation\/technologies"},"doc://com.apple.documentation/videos/play/wwdc2020/10031":{"abstract":[{"text":"Display detailed data in your SwiftUI apps more quickly and efficiently with improved stacks and new list and outline views. Now available on iOS and iPadOS for the first time, outlines are a new multi-platform tool for expressing hierarchical data that work alongside stacks and lists. Learn how to use new and improved tools in SwiftUI to display more content on screen when using table views, create smooth-scrolling and responsive stacks, and build out list views for content that needs more than a vStack can provide. Take your layout options even further with the new grid view, as well as disclosure groups.\n\nTo get the most out of this video, we recommend first checking out “SwiftUI App Essentials,” which provides an overview of everything new in SwiftUI for 2020. If you’re brand-new to coding with SwiftUI, we also suggest watching 2019’s “SwiftUI Essentials” talk.","type":"text"}],"identifier":"doc:\/\/com.apple.documentation\/videos\/play\/wwdc2020\/10031","images":[{"identifier":"1636D358-5C36-4027-B204-81FFE4D05B7D","type":"card"}],"kind":"article","role":"article","title":"Stacks, Grids, and Outlines in SwiftUI","type":"topic","url":"https:\/\/developer.apple.com\/videos\/play\/wwdc2020\/10031"},"human-interface-guidelines-page-image-card.png":{"alt":"An illustration of several Liquid Glass components such as toggles, sliders, and buttons, atop a neutral background. The transparent components cast shadows on the background and allow their colored elements, like a blue slider track and a green toggle backing, to show through, highlighting the Liquid Glass material's lensing effect.","identifier":"human-interface-guidelines-page-image-card.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/human-interface-guidelines-page-image-card@2x.png"}]},"layout-and-organization.svg":{"alt":"An icon of a window that's divided into three areas: a toolbar above two side-by-side views, suggesting layout and organization.","identifier":"layout-and-organization.svg","type":"image","variants":[{"svgID":"layout-and-organization","traits":["1x","light"],"url":"\/images\/com.apple.HIG\/layout-and-organization.svg"}]},"overview.svg":{"alt":"An icon of a grid comprised of four squares.","identifier":"overview.svg","type":"image","variants":[{"svgID":"overview","traits":["1x","light"],"url":"\/images\/com.apple.HIG\/overview.svg"}]}},"variantOverrides":[{"patch":[{"op":"replace","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSButton~1BezelStyle-swift.enum~1disclosure\/title","value":"NSBezelStyleDisclosure"},{"op":"replace","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSButton~1BezelStyle-swift.enum~1disclosure\/fragments","value":[{"kind":"identifier","text":"NSBezelStyleDisclosure"}]},{"op":"add","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSButton~1BezelStyle-swift.enum~1disclosure\/navigatorTitle","value":[{"kind":"identifier","text":"NSBezelStyleDisclosure"}]},{"op":"replace","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSButton~1BezelStyle-swift.enum~1pushDisclosure\/title","value":"NSBezelStylePushDisclosure"},{"op":"replace","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSButton~1BezelStyle-swift.enum~1pushDisclosure\/fragments","value":[{"kind":"identifier","text":"NSBezelStylePushDisclosure"}]},{"op":"add","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSButton~1BezelStyle-swift.enum~1pushDisclosure\/navigatorTitle","value":[{"kind":"identifier","text":"NSBezelStylePushDisclosure"}]}],"traits":[{"interfaceLanguage":"occ"}]}]}