ListItem

Full-width, tappable list row rendered as an anchor (<a>) by default, or as a Next.js Link via the as prop. Supports an optional trailing icon or element.

When to use

Use ListItem for rows in a navigable or actionable list (settings rows, menu entries, selectable records). Like Button, it is anchor-based, so it works both as a link (with href) and as a button (with onClick / type="submit"), applying the correct role, tabIndex, and keyboard activation automatically.

There is no @uxf/form twin — ListItem is a standalone navigation/action primitive.

Usage

import { ListItem } from "@uxf/ui/list-item";

// row with a trailing chevron
<ListItem endIcon="chevronRight" onClick={onClick}>
    Name Surname
</ListItem>

// plain row
<ListItem onClick={onClick}>No end icon</ListItem>

// row with a custom trailing element
<ListItem endElement={<Icon className="text-success" name="camera" size={24} />} onClick={onClick}>
    End element
</ListItem>

// client-side navigation via Next.js Link
import Link from "next/link";
<ListItem as={Link} href="/detail">Go to detail</ListItem>

Props

Extends AnchorHTMLAttributes<HTMLAnchorElement> (minus type) plus UseAnchorProps, so all standard <a> attributes (href, target, rel, onClick, className, children, …) are accepted. The ref is forwarded to the anchor.

Variants & states

• Button vs. link: with onClick or type="submit" the row gets role="button" and keyboard (Enter/Space) activation; with href it behaves as a hyperlink. When href and target="_blank" are set, rel="noopener noreferrer" is added automatically.
• Disabled: set isDisabled — clicks and keyboard activation are blocked and the row leaves the tab order.

Requirements

Import the component stylesheet, plus the Icon stylesheet (used by endIcon), once in your global CSS:

@import url("@uxf/ui/css/icon.css");
@import url("@uxf/ui/css/list-item.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.