Disclosure triangle

The disclosure triangle is the oldest expand control in graphical interfaces, inherited from the Macintosh Finder, and it survives because its two positions are unambiguous: pointing right means there is more, pointing down means you are looking at it. The rotation between them is the whole vocabulary, which is why the shape is a triangle rather than a plus sign. A plus can only say “add”.

Engineers call it a twisty, designers usually say caret or chevron, and Apple’s guidelines call the family disclosure controls. The words are used loosely, but the distinctions are real: a chevron is drawn as two strokes and an arrow as one line with a head, while the classic triangle is a filled solid. Filled or stroked matters less than direction, since direction is what carries state.

The triangle is a control, not an ornament, so it needs a hit area far larger than the seven pixels it draws. Give it the padding of a button, put aria-expanded on the element that receives the click, and let the row label open the branch as well: a reader who missed the triangle by two pixels should not be punished for it. In a tree, the row is the tree item and the triangle lives inside it, so the expanded state belongs to the row.

One convention deserves care. In file browsers a triangle only appears beside items that have children, and its absence is information: the folder is empty, or the item is a leaf. Rendering a permanently disabled triangle on every row throws that signal away.