Navigation / React + CSS
Segmented control
A small set of mutually exclusive choices, with a deliberate selected state.
A clear picture of your project.
"use client";
import styles from "./SegmentedControl.module.css";
import { useId } from "react";
export default function SegmentedControl({
label = "View",
options = ["Overview", "Activity", "Notes"],
value = "Overview",
onChange,
}) {
const name = useId();
return (
<fieldset className={styles.field}>
<legend>{label}</legend>
<div className={styles.segments}>
{options.map((option) => (
<label key={option}>
<input
type="radio"
name={name}
value={option}
checked={value === option}
onChange={() => onChange?.(option)}
/>
<span>{option}</span>
</label>
))}
</div>
</fieldset>
);
}
Make it yours
Use for two to four related options. The parent should update the associated view or filter. This is a radio group, not an ARIA tab widget.
- Use a React project with CSS Modules support, such as Next.js or Vite.
- Save the JSX as
SegmentedControl.jsxand the CSS asSegmentedControl.module.cssin the same folder. - Import
SegmentedControland connect its props to your application. Controlled components need parent state and change handlers.
No third-party component or animation package is required. Use the theme controls to adjust accent, corners, spacing, and type. Copy the Theme CSS into your stylesheet and wrap your components in <div className="tdp-components">. The theme applies to every component inside that wrapper. TDP defaults work without a theme file.
Props
| Prop | Type | Use |
|---|---|---|
label | string | Group label, rendered as a legend. |
options | string[] | Unique option labels. |
value | string | Selected option. |
onChange | function | Receives the selected string. |
Accessibility & behavior
Native radios provide arrow-key movement and one selection per group. Each instance gets its own name through useId, and the legend labels the group.
Visible focus styles and reduced-motion support are included. Check labels, contrast, keyboard behavior, and screen-reader output again after adapting the component to your product.