A segmented control is a mutually exclusive , single-select control where all options are visible at once. Only one item can be selected at a time, and there is always one item selected. It is commonly used to switch between different views or formats of the same content — such as toggling between grid and list view, or filtering between "All", "Favorites", and "Recent".
Each dt-segmented-control-item wraps a DtButton internally and inherits its slot and prop surface, including #startIcon, #endIcon, #leading, #trailing, disabled, and label-class.
Segmented Control Tabs Purpose Switch between views or formats of the same content Navigate between distinct content sections Content relationship Same data, different presentation (e.g., grid vs. list) Different data in each section (the filing cabinet metaphor — each tab holds different papers) Hierarchy Lower-level, often within a tabbed section Top-level content organization ARIA role radiogroup with radio itemstablist with tab items and associated tabpanelsContent panel None — consumers manage their own view switching Built-in panel association via aria-controls
Do
Use when presenting 2–5 mutually exclusive options that control the same content area. Use concise labels — 1–3 words that describe the view the user will see. Keep label lengths consistent across items for visual balance. Use for switching between views or formats : grid/list, all/filtered, map/satellite. Provide an aria-label on the segmented control that describes the purpose of the group. Use the label prop on icon-only items for accessibility.
Don’t
Don't use for navigation between distinct content sections — use Tabs instead. Don't use for binary on/off choices — use a Toggle instead. Don't use for more than 5 options — consider a Select Menu or Chip group. Don't mix text-only and icon-only items within the same control. Don't use to trigger actions — use a Button or Button Group instead. < dt-segmented-controlv-model = " selected" aria-label = " View filter" > < dt-segmented-control-itemvalue = " all" > </ dt-segmented-control-item> < dt-segmented-control-itemvalue = " favorites" > </ dt-segmented-control-item> < dt-segmented-control-itemvalue = " recent" > </ dt-segmented-control-item> < dt-segmented-control-itemvalue = " groups" > </ dt-segmented-control-item> </ dt-segmented-control>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Remove the border and padding from the container.
< dt-segmented-controlv-model = " selected" borderless > </ dt-segmented-control>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
< dt-segmented-controlv-model = " selected" :show-divider = " false" > </ dt-segmented-control>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Items share space equally. Only applies in horizontal orientation.
< dt-segmented-controlv-model = " selected" spread = " evenly" > </ dt-segmented-control>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Add disabled to the group to disable all items.
< dt-segmented-controlv-model = " selected" disabled > </ dt-segmented-control>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Add disabled to an individual item.
< dt-segmented-controlv-model = " selected" aria-label = " Individual disabled example" > < dt-segmented-control-itemvalue = " all" > </ dt-segmented-control-item> < dt-segmented-control-itemvalue = " favorites" disabled > </ dt-segmented-control-item> < dt-segmented-control-itemvalue = " recent" > </ dt-segmented-control-item> < dt-segmented-control-itemvalue = " groups" > </ dt-segmented-control-item> </ dt-segmented-control>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
All Favorites Recent
All Favorites Recent
All Favorites Recent
All Favorites Recent
All Favorites Recent
< dt-segmented-controlv-model = " selected" :size = " 100|200|300|400|500" > </ dt-segmented-control>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Use the #startIcon or #endIcon slot on dt-segmented-control-item to add an icon. The slot provides iconSize to match the control's size.
< dt-segmented-controlv-model = " iconSelected" aria-label = " List spacing" > < dt-segmented-control-itemvalue = " compact" > < template#startIcon = " { iconSize }" > < dt-iconname = " list-spacing-compact" :size = " iconSize" /> </ template> </ dt-segmented-control-item> < dt-segmented-control-itemvalue = " regular" > < template#startIcon = " { iconSize }" > < dt-iconname = " list-spacing-regular" :size = " iconSize" /> </ template> </ dt-segmented-control-item> < dt-segmented-control-itemvalue = " expanded" > < template#startIcon = " { iconSize }" > < dt-iconname = " list-spacing-expanded" :size = " iconSize" /> </ template> </ dt-segmented-control-item> </ dt-segmented-control>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Omit the default slot text to create icon-only items. Use the label prop for accessibility.
< divclass = " d-w-750" > < dt-segmented-controlv-model = " iconOnlySelected" aria-label = " Appearance mode" > < dt-segmented-control-itemvalue = " system" label = " System" > < template#startIcon = " { iconSize }" > < dt-iconname = " laptop-2" :size = " iconSize" /> </ template> </ dt-segmented-control-item> < dt-segmented-control-itemvalue = " light" label = " Light" > < template#startIcon = " { iconSize }" > < dt-iconname = " sun" :size = " iconSize" /> </ template> </ dt-segmented-control-item> < dt-segmented-control-itemvalue = " dark" label = " Dark" > < template#startIcon = " { iconSize }" > < dt-iconname = " moon" :size = " iconSize" /> </ template> </ dt-segmented-control-item> </ dt-segmented-control> </ div> < div> < dt-segmented-controlv-model = " iconOnlySelected" aria-label = " Appearance mode" class = " d-d-inline-flex" > < dt-segmented-control-itemvalue = " system" label = " System" > < template#startIcon = " { iconSize }" > < dt-iconname = " laptop-2" :size = " iconSize" /> </ template> </ dt-segmented-control-item> < dt-segmented-control-itemvalue = " light" label = " Light" > < template#startIcon = " { iconSize }" > < dt-iconname = " sun" :size = " iconSize" /> </ template> </ dt-segmented-control-item> < dt-segmented-control-itemvalue = " dark" label = " Dark" > < template#startIcon = " { iconSize }" > < dt-iconname = " moon" :size = " iconSize" /> </ template> </ dt-segmented-control-item> </ dt-segmented-control> </ div>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Use the #leading and #trailing slots on dt-segmented-control-item to render content alongside labels, such as badges or count indicators.
< dt-segmented-controlv-model = " trailingSelected" aria-label = " Fruit counts" > < dt-segmented-control-itemvalue = " apples" trailingClass = " d-pie-100" > < template#trailing > < dt-badgekind = " count" > </ dt-badge> </ template> </ dt-segmented-control-item> < dt-segmented-control-itemvalue = " oranges" trailingClass = " d-pie-100" > < template#trailing > < dt-badgekind = " count" > </ dt-badge> </ template> </ dt-segmented-control-item> < dt-segmented-control-itemvalue = " bananas" trailingClass = " d-pie-100" > < template#trailing > < dt-badgekind = " count" > </ dt-badge> </ template> </ dt-segmented-control-item> </ dt-segmented-control>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Set orientation="vertical" to stack items vertically.
< dt-segmented-controlv-model = " selected" orientation = " vertical" > </ dt-segmented-control>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
By default, items select immediately on focus via arrow keys, following the WAI-ARIA Radio Group pattern . Set activation-mode="manual" to require an explicit Enter or Space keypress after focusing an item.
< dt-segmented-controlv-model = " selected" activation-mode = " manual" > </ dt-segmented-control>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
import { DtSegmentedControl, DtSegmentedControlItem } from '@dialpad/dialtone-vue' ; The segmented control implements the WAI-ARIA Radio Group pattern with roving tabindex for keyboard navigation.