> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/segmented-control.md).

# Segmented Control

The Avonni Segmented Control component displays a set of options as connected segments, letting users pick a single value from a compact, button-style group.

## Overview

To start with the Avonni Segmented Control component, you'll first need to connect it to your data and configure the options it should display. The sections below follow the configuration panel from top to bottom, so you can read along as you build.

## Configuration

To configure the Segmented Control, select it on the canvas. The **Edit Segmented Control** panel opens on the right with three tabs: **Properties**, **Interactions**, and **Style**. The sections below mirror the Properties tab.

### Data Source

Before you build your segmented control, you must tell the Avonni Segmented Control component where to get the options it should display. You have several options, depending on the source and nature of your data:

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Manual</strong></td><td>Enter data directly into the component configuration.</td><td></td></tr><tr><td><strong>Variable</strong></td><td>This is useful for data that changes based on user interactions or other component logic.</td><td></td></tr><tr><td><strong>Query</strong></td><td>This is the most common option for displaying Salesforce records.</td><td></td></tr><tr><td><strong>Picklist</strong></td><td>Retrieve data dynamically from a standard or custom picklist field within Salesforce.</td><td><a href="/pages/NMTcHeq9UuKYUmBedI8t">/pages/NMTcHeq9UuKYUmBedI8t</a></td></tr></tbody></table>

### Data Mapping

When using a dynamic data source for your Segmented Control, you'll need to configure the **Data Mappings** section to tell the component how to turn each queried record into a segment.

Think of it like a translator: Data Mappings ensure the correct information from your Salesforce data ends up in each segment.

**Why are Data Mappings Important?**

Without data mapping, the control wouldn't know which part of your data to render. This could result in segments showing incorrect or irrelevant information.

**How Do Data Mappings Work?**

In the Data Mappings section, you'll establish the connection between your Salesforce data fields and the corresponding segment attributes. By selecting which field maps to which attribute, you ensure each segment accurately displays the correct information from your Salesforce data.

| Attribute | Description                                                                                                                    |
| --------- | ------------------------------------------------------------------------------------------------------------------------------ |
| **Label** | Text label of the option. For common objects this is prefilled (for example, the Subject of a Task or the Name of an Account). |
| **Value** | A unique value for the option, defaulting to the record Id. This value is returned when the segment is selected.               |

### Options

The Options section defines the static list of segments rendered in the control. Each item represents one selectable segment, with two attributes:

| Attribute | Description                                                                                                   |
| --------- | ------------------------------------------------------------------------------------------------------------- |
| **Label** | Text label shown on the segment.                                                                              |
| **Value** | A unique value for the option. This must match the control's **Value** property when the segment is selected. |

### Content

The Content section controls which segment is selected and how the segments are laid out.

#### Value

The **`value`** property sets the currently selected option. It must match the **Value** of one of the defined segments. If left empty, the first segment is selected by default.

#### Stretch

When enabled, segments stretch to evenly fill the full available width of the container. When off, each segment sizes to its own label.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Segmented Control. Configure them from the **Interactions** tab of the Edit Segmented Control panel.

### Change

Fires when a user selects a different segment. Use this to navigate to a related record, filter another component, or trigger any other flow logic tied to the selected value. The selected segment is exposed through the **selectedItem** and **selectedItemSObject** output attributes.

## Output Variables

The Segmented Control exposes these output variables you can reference elsewhere on the page after the user interacts with it.

### Segment Selection

When a user picks a segment, these variables update with the selected segment's data.

| Output variable           | Type             | What it returns                                                                                                    |
| ------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ |
| **Selected Item**         | Object           | The selected segment's data — its label and value.                                                                 |
| **Selected Item sObject** | Record (SObject) | The full Salesforce record associated with the selected segment. Requires a **Query** or **Variable** data source. |

> **Example:** When a user selects a segment, use **Selected Item sObject** to display the corresponding record's details in a record-detail component beside the control.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/segmented-control.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.