Visual Picker Link
The Visual Picker Link is a selectable, visually styled component that displays a title, rich content, an optional icon, and an optional progress indicator. Use it to present a single clickable option — such as a resource, step, or action — with a clear visual treatment.
Overview
The Visual Picker Link is designed for situations where you want users to select or navigate to a specific option that benefits from a prominent, card-like presentation. You can mark it as completed or disabled, add an icon for quick recognition, and overlay a progress indicator to convey status or completion level.
Configuration
To configure the Visual Picker Link, select it on the canvas. The Edit Visual Picker Link panel opens on the right. The sections below mirror the Properties panel from top to bottom.
Properties
Title
The title is displayed in the header of the picker. Use it to give users a clear, concise label for what this link represents.
Content
Rich text displayed in the body of the picker. Use it to provide additional context or a short description of the link's destination or purpose.
Icon Name
A Lightning Design System icon displayed alongside the picker content. Choose an icon that reinforces the link's meaning at a glance.
Icon Position
Controls where the icon appears relative to the content. Defaults to Left. Requires Icon Name to be set.
Left — icon appears before the content
Right — icon appears after the content
Completed
When enabled, the picker is displayed in a completed state. Use this to reflect that the user has already taken the associated action or reached the destination.
Disabled
When enabled, the picker is displayed as disabled and cannot be interacted with.
Info Only
When enabled, the picker is rendered as informational only, without selection behavior. Use this to present static information in a picker-style layout.
Progress
The Progress group lets you overlay a progress indicator on the picker to represent completion or status. Expand it to configure the indicator.
Value
A numeric value that drives the progress indicator. Setting this value activates the indicator.
Progress Attributes
Fine-grained control over the appearance of the progress indicator. Requires Value to be set.
Type — shape of the indicator: Bar (default) or Circle
Position — placement relative to the picker content. For Bar: Top or Bottom. For Circle: Left or Right
Label — text label displayed alongside the indicator
Size — indicator size. Bar supports: X-Small, Small, Medium, Large, Full. Circle supports: Xx-Small, X-Small, Small, Medium, Large, X-Large
Thickness — thickness of the bar or circle ring: X-Small, Small, Medium, Large, X-Large
Rounded — applies rounded end caps to the progress bar. Requires Type = Bar
Show Value — displays the numeric progress value inside or alongside the indicator
Alternative Text — accessible description of the progress, used by assistive technologies
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Interactions
Interactions define what happens when users interact with the Visual Picker Link. Configure them from the Interactions tab of the Edit Visual Picker Link panel.
Click
Fires when a user clicks the picker. Not available when the picker is disabled or configured as Info Only. Use this to navigate to a URL, open a modal, trigger a flow, or perform any other action tied to the selected option.
Output Variables
The Visual Picker Link exposes one output variable you can reference elsewhere on the page after the user interacts with it.
Click
Populated when the user clicks the picker.
Clicked
Boolean
true when the user has clicked the picker.
Example: Use Clicked in a visibility condition on a follow-up component to reveal additional content only after the user selects this option.
Styling
Configure the Visual Picker Link's appearance from the Style tab of the Edit Visual Picker Link panel.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the border surrounding the component.
Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Styles the tile.
Tile: Background Color (plus Disabled state).
Border: Color (plus Disabled and Hover states) / Size (plus Hover) / Style (plus Hover) / Radius.
Styles the tile title.
Color / Font Size / Font Style / Font Weight / Line Clamp: Set the title color, typography, and line clamp.
Styles the tile description.
Line Clamp: Limit the description to a number of lines.
Styles an icon shown on the tile.
Background / Background Completed / Foreground: Set the icon colors.
Border Radius: Round the icon corners.
Styles the progress indicator (when one is shown).
Bar: Color / Completed Color; Label Font Color / Font Size / Font Style / Font Weight; Value Color / Value Font Size / Font Style / Font Weight.
Circle: Color / Completed Color; Value Color / Value Font Style / Font Weight; Label Font Color / Font Style / Font Weight.
Styles the separator line.
Color / Size / Style: Set the separator color, thickness, and style.
Last updated
Was this helpful?