HomeGetting StartedColor SystemTypographySpacingIconographyLayoutInstallationUsageAngularBlazorReactSvelteVueThemingTypographyCustomizationCSS-Only ComponentsFormsIconsIllustrationsAccessibilityGlobal ConfigurationTailwind CSSSass LibraryForge MCP ServerDropdown OptionsFocus Indicator ClippingAll componentsButtonButton AreaChipFloating Action ButtonIcon ButtonSplit ButtonAutocompleteButton ToggleCalendarCheckboxChip FieldColor PickerDate PickerDate Range PickerFile PickerLabelRadioSelectSliderSwitchText FieldTime PickerApp BarApp LauncherDrawerMenuPaginatorSkip LinkStepperTabsView SwitcherAccordionApp LayoutCardDividerExpansion PanelScaffoldSplit ViewStackStructured CardToolbarBadgeBannerBusy IndicatorCircular ProgressDialogInline MessageLinear ProgressPage StateSkeletonToastTooltipAvatarIconKeyLabel ValueListMeterSecretTableTimelineTimestampTreeKeyboard ShortcutPopoverIntroductionColorTypographySpacingShapeBorderElevationLayeringAnimationUsageIcon LibraryBlocksRoadmapChangelogBlog

Key

Keys label the meaning of colors or values in a chart or data visualization, such as which color in a grouped meter represents which series.

Black Guillemot25%Great Shearwater50%Mealy Redpoll75%

Usage

forge-key lays out one or more forge-key-item entries, each pairing a colored icon with a label (and an optional value slot), to explain what a color or series means in a chart or visualization. It’s the standard companion to a grouped meter: label each meter in the group with a key item sharing its color, so the grouping is legible without relying on color alone.

Rules

Do
Match each key item's icon color exactly to the color of the data it labels.Pair every grouped meter with a key — color alone isn't enough to distinguish its parts.Use the value slot when a specific number, not just a label, helps interpret the visualization.
Don't
Don't use a key for a single, unsegmented value with nothing else to distinguish.Don't let a key's color drift from the visualization's actual colors after a theme or data change.

Basic usage

Each forge-key-item pairs an icon color with a label describing what it represents.

A key labeling the parts of a grouped visualization.

Keys present key items to label a chart or data visualization.

import "@tylertech/forge/key";
Slots
NameDescription
(default)The default slot for key items.
CSS Parts
NameDescription
::part(root)The root element.
CSS Custom Properties
NameDescription
--forge-key-gapThe spacing between key items.
--forge-key-directionThe direction that items are laid out in the key.

Distinguishable colors

Make sure each key item’s icon color is easily distinguishable from the others, and matches the color used in the associated visualization — don’t rely on subtle shade differences alone.

Text alternative

Use the value slot to give assistive technology a text alternative for data the visualization otherwise only conveys visually.

Loading Forge chat…