Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Segmented Control

A radio-group-style toggle bar that renders slotted arc-option elements as a row of mutually exclusive buttons with an active highlight.

Components Segmented Control
input interactive
<arc-segmented-control>

Overview

SegmentedControl provides a compact, horizontal set of mutually exclusive options rendered as a pill-shaped button group. It reads `<arc-option>` children from its default slot and mirrors them as styled buttons inside a bordered container with rounded corners. The currently selected option receives an accent-primary background with a subtle glow, while unselected options appear in muted text that brightens on hover. The component uses a `radiogroup` ARIA role with individual `radio` roles on each option button, following the WAI-ARIA radio group pattern. Keyboard navigation supports arrow keys for cycling through options (with wrapping), Home/End for jumping to the first or last option, and Enter/Space for confirming a selection. Focus management automatically moves focus to the newly selected button after keyboard navigation. SegmentedControl auto-selects the first option when no initial `value` is provided, ensuring the control always has a valid selection. It fires a single `arc-change` event with the selected value whenever the user makes a new choice, making it straightforward to wire into form state or reactive frameworks.

Guidelines

When to use

  • Use SegmentedControl for 2-5 options where the user must pick exactly one
  • Keep option labels short — ideally one or two words — to prevent overflow
  • Provide a `value` attribute if you need to pre-select an option other than the first
  • Listen to `arc-change` to react to selection changes in your application logic
  • Place the control within a form context or a settings panel where space is limited

When not to use

  • Do not use for more than 5 options — use Select or RadioGroup instead for longer lists
  • Do not nest interactive elements inside `<arc-option>` children — labels should be plain text
  • Do not use SegmentedControl for navigation between views — use Tabs instead
  • Do not rely solely on the glow color to indicate selection — the component also uses aria-checked for accessibility
  • Avoid using it for binary toggles where a Toggle switch would be more semantically appropriate

Features

  • Renders slotted `<arc-option>` elements as styled toggle buttons in a horizontal pill container
  • Active option highlighted with accent-primary background, contrasting text, and glow shadow
  • Full keyboard navigation: arrow keys cycle options with wrapping, Home/End jump to edges, Enter/Space confirm
  • ARIA radiogroup pattern with `role="radio"` and `aria-checked` on each option button
  • Auto-selects the first option when no `value` attribute is provided
  • Hover state brightens text and adds a subtle background on non-active options
  • Disabled state at 40% opacity with pointer events blocked on the entire control
  • Respects `prefers-reduced-motion` by disabling transitions

Preview

Daily Weekly Monthly

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-segmented-control value="monthly">
  <arc-option value="daily">Daily</arc-option>
  <arc-option value="weekly">Weekly</arc-option>
  <arc-option value="monthly">Monthly</arc-option>
</arc-segmented-control>
 
import { SegmentedControl, Option } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <SegmentedControl value="monthly">
      <Option value="daily">Daily</Option>
      <Option value="weekly">Weekly</Option>
      <Option value="monthly">Monthly</Option>
    </SegmentedControl>
  );
}
 
<script setup>
import { SegmentedControl, Option } from '@arclux/arc-ui-vue';
</script>

<template>
  <SegmentedControl value="monthly">
    <Option value="daily">Daily</Option>
    <Option value="weekly">Weekly</Option>
    <Option value="monthly">Monthly</Option>
  </SegmentedControl>
</template>
 
<script>
  import { SegmentedControl, Option } from '@arclux/arc-ui-svelte';
</script>

<SegmentedControl value="monthly">
  <Option value="daily">Daily</Option>
  <Option value="weekly">Weekly</Option>
  <Option value="monthly">Monthly</Option>
</SegmentedControl>
 
import { Component } from '@angular/core';
import { SegmentedControl, Option } from '@arclux/arc-ui-angular';

@Component({
  imports: [SegmentedControl, Option],
  template: `
    <arc-segmented-control value="monthly">
      <arc-option value="daily">Daily</arc-option>
      <arc-option value="weekly">Weekly</arc-option>
      <arc-option value="monthly">Monthly</arc-option>
    </arc-segmented-control>
  `,
})
export class MyComponent {}
 
import { SegmentedControl, Option } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <SegmentedControl value="monthly">
      <Option value="daily">Daily</Option>
      <Option value="weekly">Weekly</Option>
      <Option value="monthly">Monthly</Option>
    </SegmentedControl>
  );
}
 
import { SegmentedControl, Option } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <SegmentedControl value="monthly">
      <Option value="daily">Daily</Option>
      <Option value="weekly">Weekly</Option>
      <Option value="monthly">Monthly</Option>
    </SegmentedControl>
  );
}

API

value string ''
The value of the currently selected option. Reflected as an attribute and auto-set to the first option if empty.
disabled boolean false
Disables the entire control, reducing opacity to 40% and blocking pointer events.

Events

arc-change detail: { value: string }
Fired when the selected segment changes

Option

<arc-option>

Individual option element slotted into the segmented control. The `value` attribute identifies the option and the text content becomes the label.

label
Expose text content as label
value string ''
The value identifier for this option, used to match against the parent control value.
disabled boolean false
When true, dims this option and prevents it from being selected.
selected boolean false

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy