Segmented Control

A single choice between a few options, with a pill that slides to the pick.

Dependenciesmotion

Installation#

pnpm dlx shadcn@latest add @balick/segmented-control

Or pass the full URL: https://ui.balick.me/r/segmented-control.json

Usage#

"use client"

import * as React from "react"

import { SegmentedControl } from "@/components/ui/segmented-control"

export function BillingToggle() {
  const [billing, setBilling] = React.useState("yearly")

  return (
    <SegmentedControl
      aria-label="Billing period"
      value={billing}
      onValueChange={setBilling}
      options={[
        { value: "monthly", label: "Monthly" },
        { value: "yearly", label: "Yearly", badge: "−20%" },
      ]}
    />
  )
}

Props#

Prop	Type	Default	Description
`value` The selected option. Required.	`string`	—	The selected option. Required.
`onValueChange` Called with the option the user picks. Required.	`(value: string) => void`	—	Called with the option the user picks. Required.
`options` The options, in order. Required.	`{ value: string; label: ReactNode; badge?: ReactNode }[]`	—	The options, in order. Required.
`aria-label` Names the group for assistive technology.	`string`	—	Names the group for assistive technology.