A padded row for a consumer-provided control with optional leading and trailing content.
Structure
Item renders a div wrapper without an inherent role or keyboard behavior. Use a native control with an accessible name, and put action-specific handlers and a control ref on that control. A React ref passed to Item points to the wrapper div.
Visual states
The isInteractive, isDisabled, isSelected, isActive, and isCritical props only change appearance. Set native disabled behavior and relevant ARIA state on the control. When Item is part of a menu or listbox, the owning pattern provides the row semantics and keyboard behavior.
Leading and trailing content
Content in elementBefore and elementAfter is separate from the main control. Mark decorative content as hidden from assistive technology. Give controls in these slots their own accessible names and semantics, with their own handlers and refs when needed.
API
Custom content to render in the trailing (after) slot, alongside any built-in trailing content rather than replacing it.
Custom content to render in the leading (before) slot, alongside any built-in
leading content such as an icon rather than replacing it.