Balick UI

Segmented Control

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

Dependenciesmotion
Open in

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#

PropTypeDefault
value

The selected option. Required.

string—
onValueChange

Called with the option the user picks. Required.

(value: string) => void—
options

The options, in order. Required.

{ value: string; label: ReactNode; badge?: ReactNode }[]—
aria-label

Names the group for assistive technology.

string—