Porsche Design System

Segmented Control

Table of Contents

Segmented Control
Segmented Control Item

Segmented Control#

Properties

type BreakpointCustomizable<T> = {
  base: T;
  xs?: T;
  s?: T;
  m?: T;
  l?: T;
  xl?: T;
  xxl?: T;
};

Property

Attribute

Description

Type

Default

columns 🛠

columns

Sets the number of equal-width columns for the item layout. Use auto to distribute items based on their content width. Supports responsive breakpoint values.

type SegmentedControlColumns =
'auto'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
BreakpointCustomizable<SegmentedControlColumns>

'auto'

compact

Reduces the item height and spacing for use in dense layouts where vertical space is limited.

boolean

false

description

Sets a supplementary description displayed below the label to give users additional context about the segmented control.

string

''

disabled

Prevents user interaction with all items in the segmented control and excludes the value from form submissions.

boolean

false

form

Associates the segmented control with a form element by its ID when it is not a direct descendant of that form.

string

undefined

hideLabel 🛠

hide-label

Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.

boolean
BreakpointCustomizable<boolean>

false

label

Sets the visible label text displayed above the segmented control to describe the group of options.

string

''

message

Sets the validation feedback message displayed below the segmented control when state is success or error.

string

''

name

Sets the name of the control submitted with the form data to identify the selected value on the server.

string

undefined

noWrap

no-wrap

Prevents items from wrapping to new rows and renders them in a single horizontally scrollable row instead.

boolean

false

required

Marks the segmented control as required so the form cannot be submitted until one option is selected.

boolean

false

state

Sets the validation state of the segmented control, controlling its visual appearance and feedback message style (none, success, error).

type SegmentedControlState =
'none'
'error'
'success'

'none'

value

Sets the currently selected item's value and pre-selects the matching option when the component renders.

string
number

undefined

Events

Event

Description

Type

blur

Emitted when the segmented control loses focus, useful for triggering validation on blur.

CustomEvent<void>

change

Emitted when the user selects a different item, carrying the new value in the event detail.

type SegmentedControlChangeEventDetail = { 
  value: string | number;
}
CustomEvent<SegmentedControlChangeEventDetail>

Slots

Slot

Description

isRequired

altProp

allowedTagNames

<slot name="label">

Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.

<slot name="label-after">

Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`).

<slot name="description">

Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.

<slot>

Default slot for the `p-segmented-control-item` tags.

<slot name="message">

Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.

Segmented Control Item#

Properties

Property

Attribute

Description

Type

Default

aria

Sets ARIA attributes on the item's button element to improve accessibility for screen readers.

type SegmentedControlItemAriaAttribute = {
  'aria-label'?: string;
}

undefined

disabled

Prevents this item from being selected and visually dims it; the parent's value will not change to this item's value.

boolean

false

icon

Sets an icon rendered inside the item button using an icon name from the PDS icon library.

type SegmentedControlItemIcon =
''
'360'
'4-wheel-drive'
'accessibility'
'active-cabin-ventilation'
'add'
'adjust'
'aggregation'
'ai-3d-object'
'ai-code'
'ai-edit'
'ai-image'
'ai-scale'
'ai-sound'
'ai-spark'
'ai-spark-filled'
'ai-text'
'ai-video'
'arrow-compact-down'
'arrow-compact-left'
'arrow-compact-right'
'arrow-compact-up'
'arrow-double-down'
'arrow-double-left'
'arrow-double-right'
'arrow-double-up'
'arrow-down'
'arrow-down-left'
'arrow-down-right'
'arrow-first'
'arrow-head-down'
'arrow-head-left'
'arrow-head-right'
'arrow-head-up'
'arrow-last'
'arrow-left'
'arrow-right'
'arrow-up'
'arrow-up-left'
'arrow-up-right'
'arrows'
'attachment'
'augmented-reality'
'battery-empty'
'battery-empty-co2'
'battery-empty-fuel'
'battery-full'
'battery-half'
'battery-one-quarter'
'battery-three-quarters'
'bell'
'bookmark'
'bookmark-filled'
'brain'
'broadcast'
'cabriolet'
'calculator'
'calendar'
'camera'
'car'
'car-battery'
'card'
'charging-active'
'charging-network'
'charging-state'
'charging-station'
'chart'
'chat'
'check'
'city'
'climate'
'climate-control'
'clock'
'close'
'closed-caption'
'cloud'
'co2-class'
'co2-emission'
'color-picker'
'compare'
'compass'
'configurate'
'copy'
'country-road'
'coupe'
'cubic-capacity'
'cut'
'delete'
'disable'
'dislike'
'dislike-filled'
'document'
'door'
'download'
'drag'
'duration'
'ear'
'edit'
'email'
'error'
'error-filled'
'exclamation'
'exclamation-filled'
'external'
'fast-backward'
'fast-forward'
'file-csv'
'file-excel'
'filter'
'fingerprint'
'flag'
'flash'
'fuel-station'
'garage'
'genuine-parts'
'geo-localization'
'gift'
'globe'
'grid'
'grip'
'group'
'hand'
'heart'
'heart-filled'
'highway'
'highway-filled'
'history'
'home'
'horn'
'image'
'increase'
'information'
'information-filled'
'key'
'laptop'
'leaf'
'leather'
'light'
'like'
'like-filled'
'limousine'
'linked'
'list'
'locate'
'lock'
'lock-open'
'logo-apple-carplay'
'logo-apple-music'
'logo-apple-podcast'
'logo-baidu'
'logo-delicious'
'logo-digg'
'logo-facebook'
'logo-foursquare'
'logo-gmail'
'logo-google'
'logo-hatena'
'logo-instagram'
'logo-kaixin'
'logo-kakaotalk'
'logo-kununu'
'logo-linkedin'
'logo-naver'
'logo-pinterest'
'logo-qq'
'logo-qq-share'
'logo-reddit'
'logo-skyrock'
'logo-snapchat'
'logo-sohu'
'logo-spotify'
'logo-tecent'
'logo-telegram'
'logo-tiktok'
'logo-tumblr'
'logo-twitter'
'logo-viber'
'logo-vk'
'logo-wechat'
'logo-weibo'
'logo-whatsapp'
'logo-x'
'logo-xing'
'logo-yahoo'
'logo-youku'
'logo-youtube'
'logout'
'map'
'menu-dots-horizontal'
'menu-dots-vertical'
'menu-lines'
'microphone'
'minus'
'mobile'
'moon'
'new-chat'
'news'
'north-arrow'
'oil-can'
'online-search'
'parking-brake'
'parking-light'
'paste'
'pause'
'phone'
'pin'
'pin-filled'
'pivot'
'play'
'play-filled'
'plug'
'plus'
'preheating'
'price-tag'
'printer'
'purchase'
'push-pin'
'push-pin-off'
'qr'
'qr-off'
'question'
'question-filled'
'racing-flag'
'radar'
'radio'
'refresh'
'replay'
'reset'
'return'
'road'
'roof-closed'
'roof-open'
'route'
'rss'
'save'
'screen'
'search'
'seat'
'send'
'service-technician'
'share'
'shopping-bag'
'shopping-bag-filled'
'shopping-cart'
'shopping-cart-filled'
'sidebar'
'sidelights'
'skip-backward'
'skip-forward'
'snowflake'
'sort'
'stack'
'star'
'star-filled'
'steering-wheel'
'stop'
'stopwatch'
'subtract'
'success'
'success-filled'
'sun'
'suv'
'switch'
'tablet'
'tachometer'
'theme'
'tire'
'trigger-finger'
'truck'
'turismo'
'unlinked'
'upload'
'user'
'user-filled'
'user-group'
'user-manual'
'video'
'view'
'view-off'
'volume-off'
'volume-up'
'warning'
'warning-filled'
'weather'
'weight'
'wifi'
'work'
'wrench'
'wrenches'
'zoom-in'
'zoom-out'

undefined

iconSource

icon-source

Sets a URL to a custom SVG icon for the item button, overriding the built-in icon set.

string

undefined

label

Sets a visible text label rendered inside the item button, used when no slotted content is provided.

string

undefined

value

Sets the value emitted by the parent p-segmented-control when this item is selected. This property is*required**.

string
number

undefined

Slots

Slot

Description

isRequired

altProp

allowedTagNames

<slot>

Default slot for the content.