Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip
ARC UI ARC Radiant Components
v4.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip

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 selectable option if empty.
name string ''
The form field name submitted with the selected value. Required for native form integration — without it, the selection will not appear in FormData.
disabled boolean false
Disables the entire control, reducing opacity to 40% and blocking pointer events.
formAssociated boolean true
properties object { // flag(), unlike `disabled`. The exclusion in props.js is specifically // about form-associated *platform* semantics: a `disabled` content // attribute that is merely present makes the element actually disabled // per the HTML spec, and formDisabledCallback assigns the property back, // so no converter can win. Neither of these is platform-mapped — // `required` is enforced by _computeValidity() below and `readonly` by // each component's own interaction handlers — so the stock converter buys // nothing here and costs the usual bug: `required="false"` read as true, // blocking submission of a form the author meant to leave optional. // Finding #48's shape, across all 26 form controls at once. required: flag(false), readonly: flag(false), }
Lit merges static properties up the prototype chain, so every consumer gets these without declaring them. required participates in constraint validation below; readonly reflects for styling and is enforced by each component's interaction handlers (the mixin can't know which gestures mutate state).
autoValidates boolean true
Components that run their own constraint-validation logic (pattern checks, range checks) opt out of the automatic required sync by overriding this to false, and own the whole validity flag set instead.
form
validity
validationMessage
required boolean false
readonly boolean false

Methods

checkValidity() boolean
Whether the control currently satisfies its constraints, per the native constraint-validation API. Fires invalid on the element when it does not, and reports nothing to the user.
reportValidity() boolean
As checkValidity(), but also shows the browser's validation message against the control when it fails.

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