Strength Indicator


Default Strength Indicator

Loading...

strength-indicator.html
<div class="flex h-1 w-full min-w-40 max-w-xs items-center gap-1">
  <div class="size-full rounded-full bg-muted"></div>
  <div class="size-full rounded-full bg-muted"></div>
  <div class="size-full rounded-full bg-muted"></div>
  <div class="size-full rounded-full bg-muted"></div>
</div>

Strength Indicator Danger

Loading...

strength-indicator-danger.html
<div class="flex h-1 w-full min-w-40 max-w-xs items-center gap-1">
  <div class="size-full rounded-full bg-danger"></div>
  <div class="size-full rounded-full bg-muted"></div>
  <div class="size-full rounded-full bg-muted"></div>
  <div class="size-full rounded-full bg-muted"></div>
</div>

Strength Indicator Warning

Loading...

strength-indicator-warning.html
<div class="flex h-1 w-full min-w-40 max-w-xs items-center gap-1">
  <div class="size-full rounded-full bg-warning"></div>
  <div class="size-full rounded-full bg-warning"></div>
  <div class="size-full rounded-full bg-muted"></div>
  <div class="size-full rounded-full bg-muted"></div>
</div>

Strength Indicator Success

Loading...

strength-indicator-success.html
<div class="flex h-1 w-full min-w-40 max-w-xs items-center gap-1">
  <div class="size-full rounded-full bg-success"></div>
  <div class="size-full rounded-full bg-success"></div>
  <div class="size-full rounded-full bg-success"></div>
  <div class="size-full rounded-full bg-muted"></div>
</div>

On this page