FeedbackGenerated from the public API
SharedHighlight
A single highlight that slides between the active items of a group.
@luc/ui/motionLive preview
The highlight is one element that moves between items, so the selection reads as a single object.
<SharedHighlight
items={[
{ value: "returns", label: "Returns" },
{ value: "risk", label: "Risk" },
]}
value={value}
onValueChange={setValue}
variant="track"
ariaLabel="Metric"
/>Usage
import { SharedHighlight } from "@luc/ui/motion";<SharedHighlight
items={[
{ value: "returns", label: "Returns" },
{ value: "risk", label: "Risk" },
]}
value={value}
onValueChange={setValue}
variant="track"
ariaLabel="Metric"
/>API
| Export | Kind | Signature |
|---|---|---|
SharedHighlight | 9 documented props | ({ className, items, value, onValueChange, size, variant, fill, ariaLabel, itemClassName, onNavigate, ...props }: SharedHighlightProps) => import("@types/react").JSX.Element |
SharedHighlight props
Type: SharedHighlightProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
ariaLabel? | string | undefined | — | |
fill? | boolean | undefined | — | |
itemClassName? | string | undefined | — | Extra classes for each item (e.g. a link's `scroll={false}` behaviour). |
items | readonly SharedHighlightItem[] | — | |
onNavigate? | ((value: string) => void) | undefined | — | |
onValueChange? | ((value: string) => void) | undefined | — | |
size? | "sm" | "md" | undefined | — | |
value | string | — | |
variant? | "track" | "underline" | undefined | — | `track` is a recessed pill track; `underline` is a bare row with a rule. |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Feedback
A press, a change, a selection — acknowledged without shouting.
Related