Segmented Control Table of Contents

• Segmented Control
• Segmented Control Item

Segmented Control# Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultbackgroundColor 🚫background-colordeprecated since v3.0.0, will be removed with next major release. Background color variationstype SegmentedControlBackgroundColor =
undefined
'background-surface'
'background-default'undefinedcolumns 🛠columnsSets the amount of columns.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 compactA boolean value that, if present, renders the segmented-control as a compact version.booleanfalsedescription descriptionSupplementary text providing more context or explanation for the segmented-control.string''disabled disabledDisables the segmented-control.booleanfalseform formThe id of a form element the segmented-control should be associated with.stringundefinedhideLabel 🛠hide-labelControls the visibility of the label.boolean
BreakpointCustomizable<boolean>falselabel labelText content for a user-facing label.string''message messageDynamic feedback text for validation or status.string''name nameThe name of the segmented-control.stringundefinedrequired requiredA boolean value that specifies a selection must be made from the group before the form can be submitted.booleanfalsestate stateIndicates the validation or overall status of the component.type SegmentedControlState =
'none'
'error'
'success''none'theme themeAdapts the segmented-control color depending on the theme.type Theme =
'light'
'dark'
'auto''light'value valueSets the initial value of the segmented-control.string
numberundefinedEventsEventDescriptionTypeblur Emitted when the segmented-control has lost focus.CustomEvent<void>change Emitted when the selection is changed.type SegmentedControlChangeEventDetail = {
  value: string | number;
}
CustomEvent<SegmentedControlChangeEventDetail>segmentedControlChange 🚫deprecated since v3.0.0, will be removed with next major release, use update event instead. Emitted when selected element changes.type SegmentedControlUpdateEventDetail = {
  value: string | number;
}
CustomEvent<SegmentedControlUpdateEventDetail>update 🚫deprecated since v3.30.0, will be removed with next major release, use change event instead. Emitted when selected element changes.type SegmentedControlUpdateEventDetail = {
  value: string | number;
}
CustomEvent<SegmentedControlUpdateEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<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# PropertiesPropertyAttributeDescriptionTypeDefaultaria ariaAdd ARIA attributes.type SegmentedControlItemAriaAttribute = {
  'aria-label'?: string;
}undefineddisabled disabledDisables the button. No events will be triggered while disabled state is active.booleanfalseicon iconThe icon shown.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-first'
'arrow-head-down'
'arrow-head-left'
'arrow-head-right'
'arrow-head-up'
'arrow-last'
'arrow-left'
'arrow-right'
'arrow-up'
'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'
'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'undefinediconSource icon-sourceA URL path to a custom icon.stringundefinedlabel labelThe label text.stringundefinedvalue valueThe value of this item which is emitted by the parent element if it becomes selected. This property is*required**.string
numberundefinedSlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot> Default slot for the content.CSS VariablesCSS VariableDescriptiondefaultValue--p-hyphens Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.auto