# Components

Arrow React Bootstrap exposes **65 components** wrapping the T-Mobile Arrow Design System (TDDS). Components are grouped by category below; each row links to a per-component file in this folder with prop tables and usage rules. Use this page to route a Figma Make task to the correct component, then open the linked file for the full API. When in doubt, prefer the component that already exists — Arrow handles most variations through props (e.g. `variant`, `size`, `menuBehavior`) rather than separate components.

## Actions

| Component | File | Use when... |
|---|---|---|
| Button | [button.md](./button.md) | Render the primary call-to-action with `variant="primary" \| "secondary" \| "tertiary"`. |
| ButtonGroup | [button-group.md](./button-group.md) | Stack two or more buttons with consistent spacing (vertical by default). |
| ButtonGroupHorizontal | [button-group-horizontal.md](./button-group-horizontal.md) | Lay out a confirm/cancel pair side-by-side (preset `arrangement="row"`). |
| ButtonStyledAsLink | [button-styled-as-link.md](./button-styled-as-link.md) | Trigger a JS action but visually present it as a link. |
| ButtonTray | [button-tray.md](./button-tray.md) | Pair a primary action with supplementary content (price, disclaimer). |
| DropdownButton | [dropdown-button.md](./dropdown-button.md) | Open a `MenuDropdown` from a button trigger with a chevron indicator. |
| IconButton | [icon-button.md](./icon-button.md) | Render an icon-only action with an accessible label. |
| LinkStyledAsButton | [link-styled-as-button.md](./link-styled-as-button.md) | Navigate to a URL but visually present it as a button. |

## Form Controls

| Component | File | Use when... |
|---|---|---|
| Checkbox | [checkbox.md](./checkbox.md) | Capture an independent boolean or one item in a multi-select list. |
| ColorSelector | [color-selector.md](./color-selector.md) | Let the user pick one color swatch from a radio group. |
| CreditCardInput | [credit-card.md](./credit-card.md) | Capture a credit card number with auto-formatting and brand detection. |
| PasswordField | [password-field.md](./password-field.md) | Capture a password with a show/hide toggle. |
| RadioGroup | [radio.md](./radio.md) | Pick one option from a small set (≤5) with visible labels. |
| Search | [search.md](./search.md) | Provide a standalone search input with clear button. |
| SearchingInput | [searching-input.md](./searching-input.md) | Trigger a `MenuDropdown` with `variant="searching"` (autocomplete). |
| Select | [select.md](./select.md) | Pick one option from a long list using the native `<select>`. |
| Stepper | [stepper.md](./stepper.md) | Increment or decrement a numeric quantity with +/- buttons. |
| StyledRadioGroup | [styled-radio.md](./styled-radio.md) | Pick one rich card with decoration, status label, and supporting text. |
| TextArea | [text-area.md](./text-area.md) | Capture multi-line text with a floating label. |
| TextField | [text-field.md](./text-field.md) | Capture a single line of text with a floating label. |
| TextingInput | [texting-input.md](./texting-input.md) | Trigger a `MenuDropdown` with `variant="texting"` (free-text + suggestions). |
| Toggle | [toggle.md](./toggle.md) | Flip a single boolean immediately (settings, preferences). |

## Selection

| Component | File | Use when... |
|---|---|---|
| Chips | [chips.md](./chips.md) | Render compact selectable pills with `variant="toggle" \| "radio" \| "button"`. |
| FilterChip | [filter-chip.md](./filter-chip.md) | Open a filter or sort dropdown menu from a chip trigger. |
| Tile | [tile.md](./tile.md) | Pick one large radio-backed card (plan picker, product chooser). |

## Navigation

| Component | File | Use when... |
|---|---|---|
| Link | [link.md](./link.md) | Render a styled anchor inline within prose or as a block. |
| Menu | [menu.md](./menu.md) | Render a contextual menu container of action items. |
| MenuButton | [menu-button.md](./menu-button.md) | Trigger a `Menu` from a button (kebab/overflow actions). |
| MenuDropdown | [menu-dropdown.md](./menu-dropdown.md) | Combine a trigger with `Menu` for select/search/multi-select dropdowns. |
| PaginationDot | [pagination-dot.md](./pagination-dot.md) | Show position within a small carousel or paginated set. |
| StepIndicator | [step-indicator.md](./step-indicator.md) | Show progress through a multi-step flow (checkout, onboarding). |
| Subnavigation | [subnavigation.md](./subnavigation.md) | Switch across pages with a secondary tab-style bar. |
| Tabs | [tabs.md](./tabs.md) | Switch between panels of content within a single page. |

## Disclosure

| Component | File | Use when... |
|---|---|---|
| Accordion | [accordion.md](./accordion.md) | Expand/collapse sections of secondary content. |
| AccordionButton | [accordion-button.md](./accordion-button.md) | Render a standalone expand/collapse button outside an accordion. |
| DisclosureCard | [disclosure-card.md](./disclosure-card.md) | Link to detail content via a tagged card with headline + supporting text. |
| DisclosureCardSecondary | [disclosure-card-secondary.md](./disclosure-card-secondary.md) | Render a list of `DisclosureCard` items in a denser layout. |
| DisclosureMenu | [disclosure-menu.md](./disclosure-menu.md) | Group menu items inside a collapsible container. |

## Display

| Component | File | Use when... |
|---|---|---|
| Avatar | [avatar.md](./avatar.md) | Show a user identity via initials, image, or icon. |
| BillCard | [bill-card.md](./bill-card.md) | Summarize a bill amount with due date and actions. |
| BroadbandFacts | [broadband-facts.md](./broadband-facts.md) | Render the FCC broadband nutrition label. |
| Divider | [divider.md](./divider.md) | Separate content horizontally or vertically. |
| List | [list.md](./list.md) | Wrap a simple list of `ListItem` rows. |
| ListItem | [list-item.md](./list-item.md) | Render a content row with label, body, status, leading decoration. |
| ListItemFilter | [list-item-filter.md](./list-item-filter.md) | Render a list row with a checkbox or radio for filtering. |
| ListItemHsi | [list-item-hsi.md](./list-item-hsi.md) | Render an internet/account flow row with HSI-specific layout. |
| ListItemNavigation | [list-item-navigation.md](./list-item-navigation.md) | Render a list row that links to another page. |
| ListItemTrailingIcon | [list-item-trailing-icon.md](./list-item-trailing-icon.md) | Render a list row ending with a trailing icon. |
| Lists | [lists.md](./lists.md) | Render a styled list mixing plain/nav/link/button/toggle item types. |
| PromoBanner | [promo-banner.md](./promo-banner.md) | Highlight a promotional offer at the top of a region. |
| PromoLabel | [promo-label.md](./promo-label.md) | Tag content with a small promotional badge. |
| PurchaseSummaryBar | [purchase-summary-bar.md](./purchase-summary-bar.md) | Sticky purchase totals with a primary checkout action. |
| SectionHeader | [section-header.md](./section-header.md) | Title a section with optional supporting actions/links. |
| StatusLabel | [status-label.md](./status-label.md) | Indicate state (success, warning, error) with a small badge. |
| Tidbit | [tidbit.md](./tidbit.md) | Display a key-value pair (label + value). |
| Title | [title.md](./title.md) | Render a styled hierarchical heading via the `headline` prop. |

## Feedback

| Component | File | Use when... |
|---|---|---|
| FullPageInterruption | [full-page-interruption.md](./full-page-interruption.md) | Block the page with an error/empty/maintenance state. |
| Modal | [modal.md](./modal.md) | Confirm a destructive action or capture focused input in a dialog. |
| NoticeBar | [notice-bar.md](./notice-bar.md) | Show inline status (announcement, brand, caution, error, positive). |
| Snackbar | [snackbar.md](./snackbar.md) | Show a transient toast confirming an async result. |

## Data Visualization

| Component | File | Use when... |
|---|---|---|
| DotLoader | [dot-loader.md](./dot-loader.md) | Indicate small in-place indeterminate loading. |
| HybridBarChart | [hybrid-bar-chart.md](./hybrid-bar-chart.md) | Render a stacked or grouped bar chart. |
| Legend | [legend.md](./legend.md) | Annotate chart series with symbol-typed labels. |
| ProgressBar | [progress-bar.md](./progress-bar.md) | Show determinate progress (use `ProgressBarGroup` for multiple bars). |
| ProgressRing | [progress-ring.md](./progress-ring.md) | Show determinate radial progress (uploads, score dials). |
| Table | [table.md](./table.md) | Display tabular data with typed columns and accessible row headers. |

## Decision matrix

| Task | Use |
|---|---|
| User submits a form | `ButtonGroup` with `Button variant="primary"` |
| Confirm/cancel pair | `ButtonGroupHorizontal` |
| Toggle a single boolean | `Toggle` (NOT `Checkbox` unless multi-select) |
| Multi-select from list | `Checkbox` group OR `Chips variant="toggle"` |
| Pick from N options (≤5) | `RadioGroup` |
| Pick from N options (>5) | `Select` |
| Search / autocomplete | `Search` OR `MenuDropdown variant="searching"` |
| Disclose / collapse content | `Accordion` |
| Show secondary actions menu | `MenuButton` + `Menu` |
| Confirm destructive action | `Modal` |
| Inline status notification | `NoticeBar` |
| Transient toast | `Snackbar` |
| Loading state (small) | `DotLoader` |
| Loading state (determinate) | `ProgressBar` |
| Loading state (radial) | `ProgressRing` |
| Tabbed sections (within page) | `Tabs` |
| Tabbed sections (across pages) | `Subnavigation` |
| Pagination dots | `PaginationDot` |
| Multi-step progress | `StepIndicator` |
| Numeric +/- input | `Stepper` |
| Linkable card | `DisclosureCard` / `DisclosureCardSecondary` (list) |
| Selectable card | `Tile` |
| Filter trigger | `FilterChip` |
| Status badge | `StatusLabel` |
| Promo badge | `PromoLabel` |
| Promotional banner | `PromoBanner` |
| Section heading | `SectionHeader` |
| Page heading | `Title` (use the `headline` prop, not children) |
| Key-value pair | `Tidbit` |
| User identity icon | `Avatar` |
| Color picker | `ColorSelector` |
| Password input | `PasswordField` |
| Credit card input | `CreditCardInput` |
| Multi-line text | `TextArea` |
| Single-line text | `TextField` |
| Rich card radio group | `StyledRadioGroup` |
| Filterable list row | `ListItemFilter` |
| Navigational list row | `ListItemNavigation` |
| Action icon-only button | `IconButton` |
| Bill summary card | `BillCard` |
| FCC broadband label | `BroadbandFacts` |
| Sticky checkout total | `PurchaseSummaryBar` |
| Stacked/grouped bars | `HybridBarChart` |
| Chart symbol legend | `Legend` |
| Horizontal/vertical rule | `Divider` |
| Full-page error/empty | `FullPageInterruption` |
| Anchor styled as button | `LinkStyledAsButton` |
| Button styled as link | `ButtonStyledAsLink` |

## Don't invent components

Arrow handles variations through props on a single component. Do **not** import names that look intuitive but do not exist:

- No `ChipsRadioGroup`, `ChipsToggle`, `ChipsButton` — use `<Chips variant="radio" \| "toggle" \| "button" />`
- No `ListsLink`, `ListsButton`, `ListsToggle` — use `<Lists>` with the `ListItemType` enum on each item
- No `Accordion.Item`, `Accordion.Header`, `Accordion.Panel` — `Accordion` takes a flat `items` prop
- No `Tabs.Tab`, `Tabs.Panel` — `Tabs` takes a flat `items` prop
- No `MenuDropdownSelecting`, `MenuDropdownSearching`, `MenuDropdownTexting` — use `<MenuDropdown variant="..." menuBehavior="..." />`
- No `DropdownMenu`, `Combobox`, `Autocomplete` — use `MenuDropdown` with the right `variant`
- No `Card`, `IconCard`, `LinkCard` — use `DisclosureCard`, `Tile`, or `BillCard` depending on intent
- No `Alert`, `Banner`, `Toast`, `Notification` — use `NoticeBar` (inline) or `Snackbar` (transient)
- No `Spinner`, `Loader`, `LoadingIndicator` — use `DotLoader`, `ProgressBar`, or `ProgressRing`
- No `Heading`, `H1`, `PageTitle` — use `Title` with the `headline` prop, or a raw `<h1 className="tdds:text-title-1">`

If a component you want isn't in the catalog table above, check the decision matrix and per-component prop docs before proposing a new one.

## Reading order

1. [/guidelines/setup.md](../setup.md) — install, providers, font + CSS imports.
2. [/guidelines/foundations/](../foundations/) — design tokens, typography, spacing, color, inverse, brand.
3. [/guidelines/composition/](../composition/) — page layout, the 12-column grid, utility classes.
4. This folder — per-component prop tables and usage rules.
