Animated Segmented Control

Use Animated Segmented Control for compact settings and view modes, such as interface density, layout style, theme, or alignment. It changes one local value at a time, rather than navigating between content panels.

Preview

Reduce motion:Off

Inspect

List density

Choose how much room each row uses.

Review new componentsDesign system

Refine motion detailsInteraction pass

Publish release notesDocumentation

Installation

npx shadcn@latest add @sona-ui/animated-segmented-control

Usage


"use client";
 
import { useState } from "react";
 
import { cn } from "@/lib/sona-utils";
import AnimatedSegmentedControl from "@/components/ui/animated-segmented-control/animated-segmented-control";
 
const items = [
  { value: "compact", label: "Compact" },
  { value: "comfortable", label: "Comfortable" },
  { value: "spacious", label: "Spacious" },
];
 
const tasks = [
  { name: "Review new components", detail: "Design system" },
  { name: "Refine motion details", detail: "Interaction pass" },
  { name: "Publish release notes", detail: "Documentation" },
];
 
const rowSpacing = {
  compact: "py-1.5",
  comfortable: "py-3",
  spacious: "py-5",
} as const;
 
export default function AnimatedSegmentedControlDemo() {
  const [density, setDensity] =
    useState<keyof typeof rowSpacing>("comfortable");
 
  return (
    <div className="flex w-full max-w-sm flex-col items-center gap-5 py-5">
      <div className="w-full">
        <p className="font-medium text-foreground text-sm">List density</p>
        <p className="text-muted-foreground text-xs">
          Choose how much room each row uses.
        </p>
      </div>
      <AnimatedSegmentedControl
        items={items}
        value={density}
        onValueChange={(nextValue) =>
          setDensity(nextValue as keyof typeof rowSpacing)
        }
      />
      <div className="w-full divide-y divide-border rounded-xl border border-border bg-background px-4">
        {tasks.map((task) => (
          <div
            key={task.name}
            className={cn(
              "flex items-center justify-between gap-3",
              rowSpacing[density],
            )}
          >
            <span className="font-medium text-foreground text-sm">
              {task.name}
            </span>
            <span className="shrink-0 text-muted-foreground text-xs">
              {task.detail}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

When to use it

Use this component for a small local mode switch. For navigation between content panels, use Fluid Tabs instead.

API

Property	Type	Default	Description
`items`	`AnimatedSegmentedControlItem[]`	`required`	Options rendered in the control.
`value`	`string`	`—`	Controlled selected value.
`defaultValue`	`string`	`—`	Initial selected value for uncontrolled usage.
`onValueChange`	`( value: string, ) => void`	`—`	Called after an option is selected.
`className`	`string`	`—`	Additional CSS classes.
`ariaLabel`	`string`	`"View mode"`	Accessible name for the group of options.

Accessibility

Set ariaLabel to describe the setting. The control groups native toggle buttons, with Tab navigation and Space or Enter activation. Uncontrolled selection starts at the first enabled option and falls back when the selected option is removed or disabled. A controlled value remains the parent's responsibility. Keyboard selection and reduced-motion mode change the active surface immediately.

Was this page helpful?

Your response helps us improve component docs.