Size

Standard panel supports three widths: small, medium, and large. The small size is best for a single column of items, such as swatches or navigation elements. Medium is the default for most scenarios and works well for tools that interact with a canvas area, including filters, sliders, text boxes, or swatches. The large size is ideal for panels where users browse or search for content, such as images, assets, cards, or templates.

Omitting labels on fields

The panel title can act as a label for the fields in the panel, if the design is reviewed and approved by an accessibility expert.

If the panel contains only one field and its label matches the panel title, consider omitting the field label. In these cases, include an ARIA label in the HTML ("aria-label" or "aria-labelledby," depending on the context.

Density considerations

Use a single panel density across a product to maintain visual consistency. Mixing densities within the same experience is not recommended.

The choice of density often depends on context, user preference, and device type. Compact saves space in complex professional tools, regular balances usability across a range of products, and spacious improves comfort in lighter-weight experiences.

Choosing a container style

Anchored panels are docked in fixed areas of the workspace and grouped with other panels on the same surface. They cannot move freely outside their designated location unless undocked. This layout helps maintain a consistent and organized workspace, making it easier for users to access essential tools without obstructing the canvas or working area. A common example is the layers panel docked to the right side of Photoshop.

Floating panels are undocked and can be moved freely anywhere on the screen, independent of the main workspace. This style offers flexibility, especially when working across multiple monitors or when isolating a panel improves focus. A common example is a Properties panel floating near artwork in Illustrator for quick access.

Dragging refers to manually moving a panel by clicking and dragging the gripper. This interaction allows users to reposition a panel within the workspace. A dragged panel can be docked into a new location (anchored) or left to float independently. This behavior supports workspace customization, helping users tailor panel placement to fit their workflow. For example, dragging the Tools panel from the left side of Photoshop to float next to the canvas.