Segmented Control
A group of connected buttons that lets users select a single option from a set. Useful for toggling between views, filters, or modes.
Install
Run the following command to install the segmented control component:
npx acc-nuxt add SegmentedControlExamples
Default
Icons
Provide an icon for each option with dynamically named slots: #option1, #option2, and so on.
Disabled
Controlled
Use v-model to read and set the selected value from outside the component.
Selected: month
Slots
#option1, option2, ... optionN="{ option: AccSegmentedControlOption }"
Optional slot for the corresponding option. Slot numbers follow the options array order. Replaces the default label when provided.
Props
options:AccSegmentedControlOption[]
Array of options. Each option needs a unique value and a display label.
modelValue:string— optional
default:undefined
The currently selected value. Use v-model to bind.
disabled:boolean— optional
default:false
When true, the entire control is non-interactive.
CSS Variables
Customize the segmented control by overriding these CSS variables on the .lev-segmented-control class.
--lev-segmented-control-bg
default:#f0f1f2
Background color of the container track.
--lev-segmented-control-padding
default:2px
Padding inside the container track.
--lev-segmented-control-gap
default:8px
Gap between segment items.
--lev-segmented-control-border-radius
default:8px
Border radius of the container track.
--lev-segmented-control-disabled-opacity
default:0.5
Opacity when the control is disabled.
--lev-segmented-control-item-bg
default:transparent
Background color of an inactive segment item.
--lev-segmented-control-item-color
default:#464747
Text color of an inactive segment item.
--lev-segmented-control-item-border-radius
default:6px
Border radius of each segment item.
--lev-segmented-control-item-padding
default:4px 12px
Padding inside each segment item.
--lev-segmented-control-item-font-size
default:14px
Font size of the segment item label.
--lev-segmented-control-item-font-weight
default:400
Font weight of the segment item label.
--lev-segmented-control-item-line-height
default:22px
Line height of the segment item label.
--lev-segmented-control-item-hover-color
default:#141414
Text color of a segment item on hover.
--lev-segmented-control-item-active-bg
default:#2d2e2e
Background color of the active segment item.
--lev-segmented-control-item-active-color
default:#ffffff
Text color of the active segment item.
--lev-segmented-control-item-active-hover-color
default:#ffffff
Text color of the active segment item on hover.
--lev-segmented-control-item-focus-outline
default:1px solid #1d66bf
Outline style when a segment item is focused.
--lev-segmented-control-item-focus-outline-offset
default:1px
Outline offset when a segment item is focused.
--lev-segmented-control-item-transition
default:background-color 150ms ease-out, color 150ms ease-out
Transition applied to background and color changes.