Docs / Components / Segmented control

Segmented control

A segmented control for switching views or options: a row of AceCSS buttons with aria-pressed, in three sizes and a full-width variant. Accessible, dark-mode ready, no JavaScript needed for the styles.

Segmented control

A group of buttons where only one can be chosen at a time, so it reads as a single control. The active segment uses --primary and the others use --secondary. Mark the active one with aria-pressed="true". Use it for switching views, periods or filters. It isn't for actions.

<div class="ace-segmented" role="group" aria-label="Period">
  <button type="button" class="ace-btn ace-btn--secondary" aria-pressed="false">Day</button>
  <button type="button" class="ace-btn ace-btn--primary"   aria-pressed="true">Week</button>
  <button type="button" class="ace-btn ace-btn--secondary" aria-pressed="false">Month</button>
</div>

Sizes: ace-segmented--xs (24px) · --sm (36px, toolbar) · default (40px)
Full width with equal segments: ace-segmented--block

<!-- Vue: swap the variant on the active value -->
:class="['ace-btn', v === modelValue ? 'ace-btn--primary' : 'ace-btn--secondary']"
:aria-pressed="v === modelValue"

Use it

One stylesheet from the CDN, pinned to v1.3.0:

<link rel="stylesheet" href="https://acecss.dev/v1.3.0/ace.min.css"
      integrity="sha384-zHAwOqjifsc0D+iUvzD1a4W0R2g0BOK9AqQJZGakUEp/Tm5IUcP07R9xkY0q/stj" crossorigin="anonymous">

Or from npm:

npm i @acecss/core

import '@acecss/core'

Bundlers, Tailwind, every script in one file and self-hosting: Install.

More components

ButtonsCopy-paste CSS buttons with primary, secondary and danger styles, five colours, any brand colour via one variable, four sizes, icon buttons and a loading state. Dark mode built in, no JavaScript.

Hero buttonA sparkle call-to-action button for landing pages: a dark pill that turns brand-coloured on hover, with twinkling stars, a spark line round the edge and particles. No GSAP, respects reduced motion.

NavbarA sticky floating glass navbar: blurred, tinted pill with a sliding hover highlight, a raised shadow on scroll and a mobile menu that unfolds inside the pill. Framework-free, dark mode included.

Liquid navbarA liquid-glass navbar that refracts the real page behind it: a WebGL lens magnifies, bends content in at the rim with a colour fringe, frosts and lights the glass. Drop-in HTML, no framework.

InputsAccessible CSS text inputs with labels, hints, required markers and error states, plus inputs with icons, prefixes and suffixes. Works with plain HTML forms and any framework.

Select & dropdownStyle native selects and textareas, or turn any <select> into a searchable dropdown with sub-labels and option groups. About 3 KB of JavaScript, keyboard accessible, no dependencies.

Date pickerA dependency-free date picker and pick-up → return date range picker with times, min and max dates, locales and a change event. Dates can be typed or picked. About 5 KB of JavaScript, dark mode ready.

Checkbox, radio & switchStyled native checkboxes, radio buttons and toggle switches in pure CSS: accessible labels, focus rings and dark mode, with no JavaScript.

BadgesStatus badges in pure CSS: neutral, primary, success, warning, danger and info, in two sizes, with contrast checked for white text.

Choice cardsSelectable cards for plans, extras or options: built on AceCSS buttons, selected with a class, aria-pressed or a checked radio inside. Pure CSS, accessible, dark mode ready.