Log-in required.

You are trying to access the internal Editor Foundations design system.
Sign-in with your Unity Google account to continue, or visit the public site.

Implementation references

Scripting API and implementation references.

UI Toolkit
IMGUI

Overview

A lighting foldout displayed as collapsed and expanded, in light and dark themes
The expanded and collapsed view of a lighting foldout
  • Foldouts hide and display content in a box that can be expanded and collapsed
  • Foldouts allow the grouping of interfaces and elements into a compact space
  • Due to their collapsing and expanding behavior, a foldout is sometimes referred to as an “accordion” or an “expandable box”

Foldouts APIs

Foldout headers displayed with bold text and with icons
Foldouts can have icons and bold labels to indicate they are headers

Foldouts in UI Toolkit

Slider icon
UI Builder allows visual creation of UI assets in UI Toolkit, and is available as a built-in feature {2021.1 and later} or a package {2020.3 and earlier}
UI Toolkit
Foldout
Makes a foldout
Foldouts in IMGUI
IMGUI
EditorGUI.Foldout
Instantiates a foldout

Guidance

When to use

Use a foldout for grouping together a small number of items in a box that can be hidden by collapsing or revealed by expanding.

Icon of a red triangle to indicate a message of warning.
Adding a foldout inside Listview
Do not manually insert a foldout inside list views. Instead use the list view's built-in toggle option to add a foldout.
Icon of a letter I in a blue circle indicating this is a piece of informational content
Inspector title bars
Inspector title bars are individual components that are similar to foldouts with additional controls like toggles, and toggle buttons.

Choosing between foldout, list, and tree view

1. Tree View 2. List View 3. Foldout
  • Tree view is used for displaying items in a multi-tiered hierarchy, like a folder structure
  • List view is used for displaying items as a flat list
  • Foldout is used to expand or collapse a single level of mixed content, like Inspector controls

Style

Foldout content
An annotated diagram of a foldout header and foldout contents
A foldout header and foldout contents

Header

  • Foldout headers always have a foldout arrow and a foldout label
  • Foldout labels can be bold to build hierarchy between nested foldouts
  • In some instances foldouts can have an icon (as seen in the tree view of the project window)

Content — Any content can be placed in Foldouts.

  • Foldouts can have lists and appear in menus to help stratify domains
  • Foldouts can be used to divide an interface into specialized sections or individual processes (as seen in the Inspector’s components)
  • Some foldouts contain items which affect other areas of an interface as seen in the nested folder foldouts of the project window which change which folder’s contents are being displayed
Foldout indentation and nesting
An annotated image of nested foldouts and the pixel values of each indentation level
An annotated image of nested foldouts and the pixel values of each indentation
  • Foldout content is indented 15 pixels for each nested level
  • The nested foldout limit is six items; beyond that the 15 px indentation padding is not adjusted
  • The foldout arrow is rendered offset from the content area

Behavior

Expand and collapse
An animated image show the Mesh Renderer’s foldouts expanding, then collapsing
Mesh renderer property foldouts expanding and collapsing
  • When used in tree views (e.g. hierarchy, project view), clicking on the foldout arrow should expand the foldout, and clicking on the foldout text should select the tree view element
  • When using foldouts for other cases (e.g. Inspector properties) clicking on either the foldout arrow or the foldout text should expand the foldout
Scrolling content

If Foldout contents are longer than its window scroll view should be used to allow for vertical scrolling.

Formatting

Anatomy and layout

Anatomy
An annotated image of a foldout’s key parts
Anatomy of a foldout and its key parts

A numeric field can contain and be paired with the following elements:

1. Foldout arrow
2. Foldout icon
3. Foldout label
4. Content

1. Foldout arrow

Arrow icon to expand and collapse foldout.

2. Foldout icon

Icon of the foldout item.

3. Foldout label

Label of the foldout item.

4. Content

Any type of control can be placed in foldouts.

Interaction states

All interactive states of a foldout, displayed in light and dark themes
The various interactive states of a foldout
Expanded

An open foldout displaying its contents.

Collapsed

A collapsed foldout.

Default

Default state of foldout.

Hovered

When hovered foldout rows are highlighted.

Focused

When focused foldout labels are highlighted in blue.

Disabled

Disabled foldouts.

Color

An annotated foldout label in light and dark theme, including the label, a foldout arrow and an icon
1. Foldout label 2. Foldout arrow 3. Icon
1. Foldout label
--unity-colors-button-border-pressed
The border color for a button control when it is pressed
#707070
#0D0D0D
2. Foldout arrow
Foldout Arrow
Foldout arrow color
#686868
#7A7A7A
3. icon
Primary Icon Color
Icons that do not require color coding use this color
#555555
#C4C4C4

Code samples

UI Toolkit samples

Icon indicating this element is available in UI Builder

Go to Window > UI Toolkit > Samples, to view code samples in C# / USS / UXML.

Slider icon