# Component Index

<!-- AUTO-GENERATED from the @riverty/web-components custom elements manifest. Do not edit by hand. -->

Use this index to find the right component for a UI requirement, then read its full API from `components/<tag>.md`.

## Form controls

| Tag | Description |
|---|---|
| `r-input` | A text input form control supporting multiple input types, validation, leading/trailing slots, and native form integration. |
| `r-input-code` | A segmented digit input for entering short numeric or alphanumeric codes such as OTP or verification codes. |
| `r-input-date` | A date input form control with structured day, month, and year fields and built-in validation. |
| `r-input-password` | A password input field with a built-in visibility toggle, validation. |
| `r-input-phone-number` | A phone number input with integrated country code prefix selection and built-in phone number validation. |
| `r-textarea` | A multiline text input form control with validation, optional character count, configurable resize behaviour. |
| `r-select` | A select allows the user to choose between a set of options. |
| `r-select-option` | `<r-select-option>` represents a single choice inside `<r-select>`. |
| `r-checkbox` | Checkboxes allow users to select none, one, or multiple items from a list. |
| `r-checkbox-group` | Groups multiple `r-checkbox` elements under a shared label with optional select-all functionality, validation, and native form integration. |
| `r-radio-button` | A radio button is used to select a single option in a list. |
| `r-radio-button-title` | Title text slot for `r-radio-button`. |
| `r-radio-button-description` | Supporting description slot for `r-radio-button`. |
| `r-radio-button-leading` | Leading visual slot (e.g. |
| `r-radio-button-trailing` | Trailing visual slot (e.g. |
| `r-radio-group` | Groups `r-radio-button` elements under a shared label with keyboard navigation, validation. |
| `r-label` | Utility component, mostly used internally in other design system components, for consistent presentation of text with optional associated tooltip. |
| `r-hint` | A form hint is a small presentational components used next to some form elements. |

## Actions

| Tag | Description |
|---|---|
| `r-button` | A button can be used by a user to trigger an action. |
| `r-icon-button` | An icon button is a button that contains only an icon and is used to trigger an action. |

## Feedback

| Tag | Description |
|---|---|
| `r-alert` | Displays an inline contextual message with a status icon, optional headline, body content, and dismiss action. |
| `r-badge` | Informational element used to indicate the status of an object or action. |
| `r-progress-bar` | Displays a horizontal progress indicator showing the completion percentage of a task or process. |
| `r-toast` | A temporary notification message with configurable status, optional auto-dismiss timer, headline, inline action, and dismiss button. |
| `r-toast-group` | Container for managing and positioning multiple `r-toast` notifications with configurable stack direction, screen position, and maximum visible count. |

## Navigation

| Tag | Description |
|---|---|
| `r-pagination` | Navigation control for moving between pages of content, with page number buttons, prev/next arrows, and configurable items-per-page options. |
| `r-panel` | A collapsible side navigation panel with expandable nav sections, can be collapsed and expanded. |
| `r-skip-link` | An accessibility utility that renders a visible-on-focus link allowing keyboard users to skip navigation and jump directly to main content. |
| `r-stepper` | A progress indicator showing a sequence of steps with completed, active, and pending states. |
| `r-stepper-item` | A single step within an `r-stepper`, with complete, active, and optional icon or number states. |
| `r-tabs` | Tab navigation container that manages the relationship between `r-tabs-list` and `r-tab-panel` elements, including active state and optional URL-based navigation. |
| `r-tabs-list` | The tab bar containing `r-tab` elements with horizontal scroll support and configurable visual variant and active border style. |
| `r-tab` | A single tab control within `r-tabs-list`, linking to a corresponding `r-tab-panel` via `panelId`. |
| `r-tab-panel` | The content panel associated with an `r-tab`, shown when its corresponding tab is active. |

## Overlay

| Tag | Description |
|---|---|
| `r-dialog` | A modal dialog overlay for displaying content or collecting user input. |
| `r-float` | Floating positioning utility that anchors content relative to a trigger element. |
| `r-popover` | A floating contextual overlay anchored to a trigger element, with headline, body content, and action slots. |
| `r-popover-trigger` | The trigger element that opens a connected `r-popover` on click or hover. |
| `r-popover-content` | Body content area inside an `r-popover`. |
| `r-popover-headline` | Headline text displayed at the top of an `r-popover`. |
| `r-popover-action` | Action button area rendered at the bottom of an `r-popover`. |
| `r-tooltip` | A floating text tooltip shown on hover or focus of the slotted trigger element. |

## Layout & content

| Tag | Description |
|---|---|
| `r-accordion` | An accordion represents a list of expandable/collapsable content sections with corresponding headers. |
| `r-accordion-section` | A single expandable section within an `r-accordion`, wrapping `r-accordion-trigger` and `r-accordion-panel`. |
| `r-accordion-trigger` | The clickable header button that controls an accordion panel's expanded or collapsed state. |
| `r-accordion-panel` | Content panel that reveals or hides within an `r-accordion-section`. |
| `r-card` | A flexible content container supporting portrait and landscape layouts with image, headline, description, badge, and optional button. |
| `r-list-item` | A single interactive list item with configurable leading icon, headline, description, trailing area, and support for nested child items. |

## Media

| Tag | Description |
|---|---|
| `r-icon` | Renders an SVG icon from the icon set (default Riverty) by name, or from a custom URL source. |
| `r-illustration` | An illustration component that renders SVG illustrations based on a provided name or slotted content. |
| `r-image` | Displays a responsive image with configurable size, object-fit, optional caption, and accessible alt text. |

## Developer tools

| Tag | Description |
|---|---|
| `r-design-system-devtools` | Can be used by developers to verify functionality of the design system. |