@controls reference

While it's possible to build controls using the Basic Editor, using the Advanced Editor is the only way to unlock the full flexibility of controls. This guide lists each property that can be used in the Advanced Editor, each possible value the properties can accept, and which @controls can recognize the properties and values.

There are two reference tables in this guide—the first lists properties for static controls (nothing happens when map readers click on these controls), and the second lists properties for interactive controls (map readers can interact with the map by clicking on these controls).

All values are unitless.

If you find a property or a value that's not documented here, let us know!

Jump to the reference for interactive controls.

Static controls

Property	Description	Valid Values	Legend	Image	Label	Text	Title	SNA Dashboard
background-color	Defines background color of control	color
color	Defines color of control's text	color
font-family	Defines font family of control's text	family-name generic-family
font-size	Defines size of control's text	number
font-style	Defines style of control's text	normal italic
font-weight	Defines weight of control's text	number
height	Defines height of control	number
margin	Defines space between the control and other controls on the map	number
metrics	Defines which metrics will be included in the dashboard	element-count connection-count density reciprocity diameter average-degree average-path-length
opacity	Defines opacity of the control	0..1
padding	Defines space between the control's border and its contents	number
src	Defines the source of the image	url
text-align	Defines alignment of text within the control	center left right
value	Any plain text string. Markdown and some HTML allowed.	string
width	Defines width of control	number

Interactive controls

Property	Description	Valid Values	Filter	Showcase	Focus	Cluster	Tagged Timeline	View Toggle
as	Defines how the control is presented	labels buttons dots dropdown
background-color	Defines background color of control	color
by	Defines the field to filter, showcase, or cluster by	''Field Name'
color	Defines color of control's text (labels, placeholders, and summaries only)	color
default	Defines which options should be selected by default	none show-all select all ''field value 1', 'field value 2',...
except	Allows you to remove field values from the available choices	''field value 1', 'field value 2',...
font-family	Defines font family of control's text (labels, placeholders, and summaries only)	family-name generic-family
font-size	Defines size of control's text (labels, placeholders, and summaries only)	number
font-style	Defines style of control's text (labels, placeholders, and summaries only)	normal italic
font-weight	Defines weight of control's text (labels, placeholders, and summaries only)	number
height	Defines height of control	number
label	Adds a label above the control	'My Label'
margin	Defines space between the control and other controls on the map	number
mode	Controls how the selection is showcased. normal is the default and showcases the selection plus any connections between the showcased elements. loose showcases the selection plus neighboring elements. strict only showcases the selection itself.	normal loose strict
multiple	Controls whether more than one option can be selected at a time	true false match-all
only	Allows you to explicitly define which field values should be included as available choices	''field value 1', 'field value 2',...
opacity	Defines opacity of the control	0..1
options	Allows you to explicitly define which options should be included as available choices	''partial-view-1', 'partial-view-2',...
out	Defines the level of connections you'd like to see (out 1: first-degree only, out 2: first- and second-degree, etc.)	number
padding	Defines space between the control's border and its contents	number
placeholder	The text to display when nothing is selected (for as: dropdown only)	string
range	Defines the years that should be included	year..year
summary	Summarizes the options that have been selected (for as: dropdown only)	string
target	Defines which items will be affected by the control	selector
width	Defines width of control	number