benflux/ui
Inputs

Segmented

A segmented control for selecting one option from a small set — with smooth sliding indicator animation.

Installation

npx benflux-ui add segmented

Usage

import { Segmented } from "@benflux-ui/react"

const [view, setView] = useState("list")

<Segmented
  value={view}
  onChange={setView}
  options={[
    { label: "List", value: "list", icon: <List className="h-3.5 w-3.5" /> },
    { label: "Grid", value: "grid", icon: <Grid className="h-3.5 w-3.5" /> },
  ]}
/>

// Full-width
<Segmented block options={options} value={val} onChange={setVal} />

// Sizes: "sm" | "md" | "lg"

Props

PropTypeDefaultDescription
value*string—Controlled selected value
onChange*(value: string) => void—Callback when selection changes
options*string[] | { label: string; value: string; icon?: ReactNode; disabled?: boolean }[]—List of options to display
size"sm" | "md" | "lg""md"Control size
blockbooleanfalseExpand to full container width
disabledbooleanfalseDisable the entire control