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
Props
options:AccSegmentedControlOption[]
Array of options. Each option needs a unique value and a display label.
disabled:boolean— optional
default:false
When true, the entire control is non-interactive.
Bindings
v-model:string— required
The value of the currently selected segment.
Emits
@update:modelValue
Emitted when the selected segment changes.
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.
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:0.875rem
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:1.375rem
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.