The selectable surface is a non-elevated container that can hold any number of atoms or organisms, and be used to trigger or select a variety of elements within the UI. While selectable surfaces may vary in look and style, the component itself is simple—it is merely a container for selecting, inputting, or triggering.
The selectable surface consists of a surface area, an active/selection indicator, and an area for content with some amount of space predefined for padding (see Specs below).
- Content - not defined by the component
- Active/selection indicator (see States below)
The selectable surface comes in varying levels of emphasis: high emphasis, medium emphasis, low emphasis, and with one additional no emphasis level. For each of the varying levels of emphasis, the surface and the active/selection indicator receive different treatments for each of the states (see States below).
Selectable surface groups
Selectable surfaces will often be presented in groups when they serve as affordance for selection or input. Selectable surface groups should allow for either single select (similar to radio button group) or multiselect (similar to checkbox groups). While not all groups will be treated the same way, they should support the following two treatments.
- Swipeable/pannable container
Standard surface groups should be used when the number of surfaces in the group is more than 3.
Standard selectable surface groups will often be swipeable (touch enabled devices) or pannable (mouse capable devices). When a group of selectable surfaces are designed to be swipeable or pannable, the group should extend off the right edge of the screen. The space between each surface should never exceed ∆platformSpacingSmall, so that any single surface will always be visible enough to indicate that the group may be swiped.
This is based on the assumption that ancestral base margins for both widescreen and mobile experiences is 24px. If the space between selectable surfaces is less than 24px, at least some portion will still be visible even when a surface overflows off screen. This approach ensures the user always is provided some affordance that more surfaces can be revealed.
On medium and large viewport widths, swipeable groups can optionally wrap so that all options are visible at once without the need to swipe/pan horizontally.
Surfaces within the standard group should all be the same height; but can vary in width based on the content within.
Full-width selectable surface “groups” are used for containing 3 or less items with the purpose of the group extending the full width of the parent container equally. Each selectable surface within a full-width group should maintain the same height; regardless of the content inside. Content within should be free to wrap — thus potentially increasing the height of the group.
The styling of the surface varies for each level of emphasis depending on the state. For all other UI elements, reference to the respective component docs or refer to the design.
Color — High emphasis
Color — Medium emphasis
Color — Low emphasis
Color — No emphasis
This element should derive its elevation from the parent container. A selectable surface should never be the only component on a raised surface.
The selectable surface has four spacing options: Comfortable, Cozy, Compact, and Full-bleed. Each option controls the amount of internal padding applied to all four sides of the surface.
When an image is the only thing within a selectable surface, the padding should be set to full-bleed.
Please note that the content within a selectable surface is allowed to introduce additional spacing as needed. The specs above refer only to the settings for internal padding of the selectable surface itself.
The size of the surface should be defined by the content or group. All of the outline strokes within the various states are 1px set inside. The selected image state adds a 3px ∆colorPlatformWhite inside stroke beneath the colored 1px stroke.
The designs below provide guidance for the various states of the surface itself depending on the selected emphasis. When a designer creates a design using the selectable surface, they will need to provide guidance for how each UI element on the surface will respond to each of the states.
When a selectable surface only contains a full-bleed image, it requires slight modification to the styling of the states.
The only unique themed element outside of what has been defined in the specs section above, is shape. The radius for the border should use the ∆shapeBrandedLarge token.
Selectable surfaces should always maintain a distinct visual grouping within a composition, and typically would appear in a group of 2 or more. If used as a single element, ensure no other content is placed within close proximity to avoid the user not understanding the interactive nature of the surface.
A selectable surface should support three primary behaviors: selecting, inputting, or triggering. For any of these actions, various states are required. When any of these states transitions to another state, a single animation pattern can be used.
Developer DocsVue Developer Docs
Component documentation coming soon!