Skip to content
← 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 RequirementItem per rule in a checklist (password/validation criteria); drive met from 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-live region) so screen readers announce requirements flipping to met.

  • Reach for RequirementItem for pass/fail checklist rows; for a generic list row use Item, and for form field errors use the field's own error message.

Props

PropTypeDefaultDescription
classNamestring

Optional additional class names

label(required)string

The requirement label text

met(required)boolean

Whether the requirement has been met

testIdstring

Optional test ID for the component

Composition

Builds on

Icon