Display a list of validation rules, each with a pass/fail/warn/unknown status icon. Used for password strength checkers, pre-submit form validation, system health checks, and any multi-rule criteria display.
Live Demo
At least 8 characters
Contains an uppercase letter
Contains a number (recommended)
Special character check
Password Strength Example
Rules update live as the user types — the root carries role="status" so screen readers
announce changes.
At least 8 characters
Contains an uppercase letter
Contains a number (recommended)
Contains a special character
Quick Start
svelte
Highlighting code...
Reactive Rules
svelte
Highlighting code...
All Status Values
pass
Requirement met
fail
Requirement not met
warn
Optional, recommended
unknown
Not yet checked
Props
items
Array of { text, status } objects.
- text — rule description (string)
- status —
'pass' | 'fail' | 'warn' | 'unknown'
icons
Override icon classes per status. Defaults to DEFAULT_STATE_ICONS.badge.
svelte
Highlighting code...
Data Attributes
| Attribute | Element | Values | Purpose |
|---|---|---|---|
data-status-list | root div | presence | Component root; theme hook |
data-status-item | item div | presence | Individual rule row |
data-status | item div | pass | fail | warn | unknown | Drives icon and text color |