← Inventory
RequirementItem
Displays a requirement item with a check/x icon indicating met/unmet status. Useful for password requirements, form validation lists, etc.
In stock
Rectified edges
Sample available
Usage
import { RequirementItem } from "@desk/ui/components/requirement-item";Best practices
Use one
RequirementItemper rule in a checklist (password/validation criteria); drivemetfrom live validation so the check/x icon updates as the user types.Render several in a vertical list and give it an accessible grouping (e.g.
aria-liveregion) so screen readers announce requirements flipping to met.Reach for
RequirementItemfor pass/fail checklist rows; for a generic list row useItem, and for form field errors use the field's own error message.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Optional additional class names | |
| label | string | The requirement label text | |
| met | boolean | Whether the requirement has been met | |
| testId | string | Optional test ID for the component |
Composition
Builds on