StrengthIndicator

Visual feedback on password strength or other measured qualities.

Strength Indicator Danger

Strength Indicator Warning

Strength Indicator Success

Strength Indicator Structure

<!-- Strength Indicator -->
<div class="flex h-1 w-full min-w-40 max-w-xs items-center gap-1"></div>
 
<!-- Strength Indicator Item/Default -->
<div class="size-full rounded-full bg-muted"></div>
 
<!-- Strength Indicator Item/Danger -->
<div class="size-full rounded-full bg-danger"></div>
 
<!-- Strength Indicator Item/Warning -->
<div class="size-full rounded-full bg-warning"></div>
 
<!-- Strength Indicator Item/Success -->
<div class="size-full rounded-full bg-success"></div>

Previous

Stepper

Next

Switch

On this page