Segmented Control

Components

Segmented Control

input

interactive

<arc-segmented-control>

Overview

Guidelines

When to use

Use Segmented Control 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 Segmented Control for navigation between views -- use Tabs instead
Do not rely solely on the glow colour 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';

<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: `
    <SegmentedControl value="monthly">
      <Option value="daily">Daily</Option>
      <Option value="weekly">Weekly</Option>
      <Option value="monthly">Monthly</Option>
    </SegmentedControl>
  `,
})
export class MyComponent {}

import { SegmentedControl, Option } from '@arclux/arc-ui-solid';

<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';

<SegmentedControl value="monthly">
  <Option value="daily">Daily</Option>
  <Option value="weekly">Weekly</Option>
  <Option value="monthly">Monthly</Option>
</SegmentedControl>

API

Prop	Type	Default	Description
`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

Event	Description
`arc-change`	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.

Prop	Type	Default	Description
`value`	`string`	`''`	The value identifier for this option, used to match against the parent control value.