[Component]: Segmented Control

[Vortelf]

Figma Design Document

No response

General Usage Example

• Clicking a segment changes the selection immediately; there is no extra apply/save action.
• If you render an external label for the whole control, set the aria-label attribute for accessibility.
• Use the value property to control the selected option programmatically.
• Enable the icon-only mode when you want a compact control that shows only icons.

<bl-segmented-control>
    <bl-segment label="React" value="react"></bl-segment>
    <bl-segment label="Vue" value="vue"></bl-segment>
    <bl-segment label="Svelte" value="svelte"></bl-segment>
</bl-segmented-control>

Rules

No response

Attributes

Attribute	Description	Default Value
attr (value)	Current selected value string	""
attr (disabled)	Disable the whole component boolean	fasle
attr (size)	Size SegmentedSize	medium
attr (orientation)	Orientation: horizontal or vertical SegmentedOrientation	horizontal
attr (icon-only)	When true, shows only icons (no text) if icons exist boolean	false

Slots

Name	Description	Default Content
segments slot	bl-segment	-

Events

Event	Description
bl-segmented-control-change	Emitted when the value changes. Event detail is the selected value. CustomEvent<string>

CSS Custom Properties

Property	Description	Default Value
--bl-segment-bg	Sets the active background color for a selected segment.	var(--bl-color-neutral-lightest, #eee)
--bl-segment-color	Sets the text color for a selected segment.	var(--bl-color-neutral-none, #000)
--bl-segment-selected-bg	Sets the background color of the selected segment (thumb).	var(--bl-segment-color-on, var(--bl-color-primary))
--bl-segment-selected-color	Sets text/icon color of the selected segment	var(--bl-color-info-contrast, #fff)
--bl-segment-width	Sets fixed width of the component.	max-content
--bl-segment-animation-duration	Sets fixed width of the component.	300ms

[AykutSarac]

@buseselvi shall we plan a design review meeting internally for this?

[Vortelf]

Hello,

@AykutSarac @buseselvi Do you have any update you can share regarding this?

Also, in my fork I've added some functionalities to other components that I was missing, that I'd also like to discuss, because I think others would find them handy additions too.