Segment Meter

A level in a few segments, such as the strength of a password.

Password

Installation#

pnpm dlx shadcn@latest add @balick/segment-meter

Or pass the full URL: https://ui.balick.me/r/segment-meter.json

Usage#

import { SegmentMeter } from "@/components/ui/segment-meter"

export function Strength({ score }: { score: number }) {
  return (
    <SegmentMeter
      value={score}
      labels={["Weak", "Fair", "Good", "Strong"]}
      aria-label="Password strength"
    />
  )
}

Props#

Prop	Type	Default	Description
`value` How many segments are filled, from 0 to segments. Required.	`number`	—	How many segments are filled, from 0 to segments. Required.
`segments` Number of segments.	`number`	4	Number of segments.
`labels` A word for each level, from the first filled segment to the last.	`string[]`	—	A word for each level, from the first filled segment to the last.
`tone` Color the segments by level (red, amber, then green), or in the foreground color.	`"level" \| "neutral"`	"level"	Color the segments by level (red, amber, then green), or in the foreground color.