Selectable Surface

Approved — Ready for dev

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.

Selectable Surface

Anatomy

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). 

  1. Surface
  2. Content - not defined by the component
  3. Active/selection indicator (see States below)


Emphasis

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.

Standard group

  1. Surfaces
  2. 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 groups


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.

Specs

Color

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

Element Property Value
Surface (Static) Background color ∆colorBrandedAffordance100
Surface (Static error) Background color ∆colorBrandedError100
Surface (Hover) Background color ∆colorBrandedHover
Surface (Hover error) Background color ∆colorBrandedError200
Surface (Pressed) Background color ∆colorBrandedPressed
Surface (Pressed error) Background color ∆colorBrandedError300
Surface (Selected) Background color ∆colorBrandedAffordance
Surface (Selected error) Background color ∆colorBrandedError

Color — Medium emphasis

Element Property Value
Surface (All non-error states) Background color ∆colorBrandedAffordance50
Surface (All error states) Background color ∆colorBrandedError50
Active indicator (Hover) Stroke color ∆colorBrandedHover
Active indicator (Hover error) Stroke color ∆colorBrandedError200
Active indicator (Pressed) Stroke color ∆colorBrandedPressed
Active indicator (Pressed error) Stroke color ∆colorBrandedError300
Active indicator (Selected) Stroke color ∆colorBrandedAffordanceAccessible
Active indicator (Selected error) Stroke color ∆colorBrandedError

Color — Low emphasis

Element Property Value
Surface Background color with alpha ∆colorPlatformWhite ∆colorPlatformAlpha0
Active indicator (Static) Stroke color ∆colorBrandedAffordance100
Active indicator (Static error) Stroke color ∆colorBrandedError100
Active indicator (Hover) Stroke color ∆colorBrandedHover
Active indicator (Hover error) Stroke color ∆colorBrandedError200
Active indicator (Pressed) Stroke color ∆colorBrandedPressed
Active indicator (Pressed error) Stroke color ∆colorBrandedError300
Active indicator (Selected) Stroke color ∆colorBrandedAffordanceAccessible
Active indicator (Selected error) Stroke color ∆colorBrandedError

Color — No emphasis

Element Property Value
Surface Background color with alpha ∆colorPlatformWhite ∆colorPlatformAlpha0
Active indicator (Hover) Stroke color ∆colorBrandedHover
Active indicator (Hover error) Stroke color ∆colorBrandedError200
Active indicator (Pressed) Stroke color ∆colorBrandedPressed
Active indicator (Pressed error) Stroke color ∆colorBrandedError300
Active indicator (Selected) Stroke color ∆colorBrandedAffordanceAccessible
Active indicator (Selected error) Stroke color ∆colorBrandedError

Elevation

This element should derive its elevation from the parent container. A selectable surface should never be the only component on a raised surface.

Spacing

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.

Size

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.

States

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.

High emphasis

Medium emphasis

Low emphasis

No emphasis

Image

When a selectable surface only contains a full-bleed image, it requires slight modification to the styling of the states.

Theming

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.

Placement

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.

Behavior

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.

Interaction Steps Duration Easing Notes Haptics
Select, input, or trigger 1. State A becomes State B ∆motionTimeExtraFast ∆motionEasingStandard All elements receiving changes throughout the state transitions from styling A to styling B. (Optional) Light on trigger (Flutter: impact light)

Developer Docs

Vue Developer Docs

Component documentation coming soon!