You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Content

Option List

In it's simplest form, the Option List is a flat, selectable item list. With multi-selection, a Checkbox is incorporated.

Overview

Simple List

Custom Content

Option Lists can have custom content inside individual options, regardless of what structure the Option List takes.

Flat Groups

The Option List can be paired with an Eyebrow to categorize a simple item list.

Group Selection

In a flat group, individual groups can be given a select all and none control.

Secondary Actions

A secondary action can be performed on individual options. Example actions include editing, deleting, or navigating to more information. Secondary actions are only visible on hover.

Tree View

The tree view is a major variation of the Option List. It is used to represent hierarchical data, as understood by users. For example, an organizational chart, divisions within business units, or categorization of inventory items. Tree views work best when users perceive items as categorical.

Tree Selection Logic

The Option List is not opinionated on what is selected when a parent of options is selected. Different variants can be used depending on the design context.

Selecting parent selects all children

When a parent is just the sum of all its children, selecting the parent can select all children. This is the most common

Selecting parent does not select children

There are times when a parent and child are independent selections from each other. This is useful when parent items can be configured distinctly from its children.

Non-selectable Parents

Sometimes only childless options should be selected. For example, if parents represent folder structures, but the user needs to select a file.

Indeterminate Visual

A tree can also take advantage of the Checkbox's indeterminate state to show partial selections of parents.

Tree View best practices

  • Minimize the number of nested levels needed to represent the data.
    • If the same data can be represented with 2 nested levels and 3, choose the 2 nested option.
  • Categories should represent how a user best perceives a hierarchy. There are many different ways to categorize objects (e.g. is a video game console a toy or an electronic), it is important to understand how end-users perceive it.

Caution when using a Tree View

  • Any usage of non-hierarchical data. Use a simpler Option List instead.
  • User generated Trees. This data structure works best when data follows some sort of parent-child relation. User created structure may cause disorder and clutter that actively impairs a users ability to handle the data.
  • When a child element might belong to multiple categories. This can create confusion for users in finding what they are looking for.
  • In general, flat lists are easier to parse through than Trees. Designers and product managers should consider whether the hierarchy’s representation improves a user’s ability to work.
  • For a simple list, particularly one tied to Forms, consider the Checkbox or Radio.
  • For a selection list that needs to be in an overlay, use the Select.
  • For a list of navigational items, consider using the Side Nav.