Disclosure Controls

Disclosure controls reveal and hide information and functionality related to specific controls or views.

Choose a control type that suits your app. There are two styles of disclosure controls: disclosure buttons and disclosure triangles. Use a disclosure button to display additional functionality associated with a specific control. Use a disclosure triangle to display additional content associated with a view or when presenting a list of disclosable items.

Disclosure Buttons

A disclosure button reveals and hides functionality associated with a specific control. TextEdit shows a disclosure button next to the Save As text field in the Save dialog. When clicked, the Save dialog expands to give the user more advanced navigation options for selecting an output location for their document.

A disclosure button is small and square with rounded corners, and includes a chevron glyph that reflects the visibility of the disclosable functionality. The chevron points down when the functionality is hidden and up when the functionality is visible. Clicking the disclosure button toggles between these two states, and the parent view expands or collapses accordingly to accommodate the available content.

Place a disclosure button close to its related control. There should be a clear relationship between the control and the expanded choices that appear or hide when the button is clicked.

Use no more than one disclosure button in a single view. Multiple disclosure buttons add complexity and can be confusing.

For developer guidance, see NSRoundedDisclosureBezelStyle.

Disclosure Triangles

A disclosure triangle reveals and hides information and functionality associated with a view or in a list of disclosable items. Keynote uses a disclosure triangle to reveal advanced options when exporting a presentation. The Finder uses disclosure triangles to progressively reveal hierarchy when navigating a folder structure in list view.

The position of a disclosure triangle reflects the visibility of the disclosable content. The triangle points to the right when the content is hidden and down when the content is visible. Clicking the disclosure triangle toggles between these two states, and the parent view expands or collapses accordingly to accommodate the available content.

Provide a descriptive label when using a disclosure triangle in a dialog. The label should indicate what is disclosed or hidden, like “Advanced Options.” Consider updating the label to reflect the visibility of the disclosable content for added clarity. For example, the label might read “Show advanced options” when the disclosure triangle is closed and “Hide advanced options” when the disclosure triangle is open.

For developer guidance, see NSDisclosureBezelStyle.