> Reference based on @adobe/react-spectrum ^3.33.0. Component APIs may change in future versions. # React Spectrum v3 Component Catalog All components are imported from `@adobe/react-spectrum`. Use named imports: ```jsx import { Button, TextField, Flex, View } from '@adobe/react-spectrum'; ``` ## Layout Components ### View Container with Spectrum styling. Use for page sections and content areas. ```jsx import { View } from '@adobe/react-spectrum'; {children} ``` **Required props:** none. **Common:** `padding`, `backgroundColor`, `UNSAFE_className`. ### Flex Flexbox layout. Use for horizontal/vertical arrangements. ```jsx import { Flex } from '@adobe/react-spectrum'; {children} ``` **Required props:** none. **Common:** `direction`, `gap`, `alignItems`, `justifyContent`, `wrap`. ### Grid CSS Grid layout. Use for complex multi-column layouts. ```jsx import { Grid } from '@adobe/react-spectrum'; {children} ``` ### Divider Visual separator between sections. ```jsx import { Divider } from '@adobe/react-spectrum'; ``` ## Navigation Components ### Tabs Tabbed navigation for section switching. ```jsx import { Tabs, TabList, TabPanels, Item } from '@adobe/react-spectrum'; General Advanced ``` **Required props:** `aria-label` on `Tabs`. **Accessibility:** Tab switching is keyboard-navigable by default. ### Breadcrumbs Hierarchy navigation. ```jsx import { Breadcrumbs, Item } from '@adobe/react-spectrum'; navigate(key)}> Home Products Product Detail ``` **Required props:** none. **Common:** `onAction`, `isDisabled`. ### Link Navigation link, styled for Spectrum. ```jsx import { Link } from '@adobe/react-spectrum'; Settings ``` ## Form Components ### Form Form container with built-in layout. ```jsx import { Form } from '@adobe/react-spectrum'; ``` **Common:** `onSubmit`, `isRequired`, `validationBehavior="native"`, `necessityIndicator`. ### TextField Single-line text input. ```jsx import { TextField } from '@adobe/react-spectrum'; ``` **Required props:** `label` (accessibility). **Common:** `value`, `onChange`, `isRequired`, `validationState`, `errorMessage`, `description`. ### NumberField Numeric input with stepper. ```jsx import { NumberField } from '@adobe/react-spectrum'; ``` **Required props:** `label`. **Common:** `value`, `onChange`, `minValue`, `maxValue`, `step`. ### Picker (Select/Dropdown) Selection from a list of options. ```jsx import { Picker, Item } from '@adobe/react-spectrum'; Electronics Clothing ``` **Required props:** `label`. **Common:** `selectedKey`, `onSelectionChange`, `isLoading`. ### Checkbox / Switch Boolean toggles. ```jsx import { Checkbox, Switch } from '@adobe/react-spectrum'; I agree to terms Enable notifications ``` **Required props:** children (label text) for Checkbox. ## Button Components ### Button Primary action button. ```jsx import { Button } from '@adobe/react-spectrum'; ``` **Required props:** `variant`. **Common:** `onPress`, `isDisabled`, `isPending` (shows spinner). **Accessibility:** Use descriptive text. Avoid icon-only buttons without `aria-label`. ## Collection Components ### TableView Data table with sorting, selection, and async loading. ```jsx import { TableView, TableHeader, Column, TableBody, Row, Cell } from '@adobe/react-spectrum'; Name Price Status {(item) => ( {item.name} {item.price} {item.status} )} ``` **Required props:** `aria-label` on `TableView`. **Common:** `selectionMode`, `onSelectionChange`, `onSortChange`, `sortDescriptor`. **Accessibility:** Always provide `aria-label`. Column headers serve as row cell labels automatically. ### ListView List with selection and actions. ```jsx import { ListView, Item } from '@adobe/react-spectrum'; {items.map(item => {item.name})} ``` ### TagGroup Display tags/chips for categories, filters. ```jsx import { TagGroup, Item } from '@adobe/react-spectrum'; {tags.map(tag => {tag.label})} ``` ## Overlay Components ### DialogTrigger + AlertDialog Confirmation dialogs. ```jsx import { DialogTrigger, AlertDialog, ActionButton } from '@adobe/react-spectrum'; Delete Are you sure you want to delete this item? This action cannot be undone. ``` **Required props:** `title` on `AlertDialog`. **Accessibility:** Focus is trapped inside the dialog automatically. ### Dialog (Complex Content) For forms or rich content in a modal. ```jsx import { DialogTrigger, Dialog, Heading, Content, Divider, ButtonGroup, Button } from '@adobe/react-spectrum'; Edit {(close) => ( )} ``` ### Tooltip Contextual help on hover/focus. ```jsx import { TooltipTrigger, Tooltip, ActionButton } from '@adobe/react-spectrum'; Additional information about this feature ``` ## Status Components ### ProgressCircle / ProgressBar Loading indicators. ```jsx import { ProgressCircle, ProgressBar } from '@adobe/react-spectrum'; // Indeterminate (unknown duration) // Determinate (known progress) ``` **Required props:** `aria-label` (ProgressCircle) or `label` (ProgressBar). ### StatusLight Status indicators. ```jsx import { StatusLight } from '@adobe/react-spectrum'; Active Error Pending Inactive ``` ### Badge Count or status badges. ```jsx import { Badge } from '@adobe/react-spectrum'; New {count} ``` ## Content Components ### Heading / Text / Content Typography components. ```jsx import { Heading, Text, Content } from '@adobe/react-spectrum'; Page Title Section Title Body text content Rich content area within a container ``` ### IllustratedMessage Empty states and error pages. ```jsx import { IllustratedMessage, Heading, Content } from '@adobe/react-spectrum'; import NotFound from '@spectrum-icons/illustrations/NotFound'; No results found Try adjusting your search or filter criteria. ``` **Use for:** Empty tables, no search results, error states, first-time setup screens. ### InlineAlert Contextual messages within page flow. ```jsx import { InlineAlert, Heading, Content } from '@adobe/react-spectrum'; Tip You can sort the table by clicking column headers. Error Failed to load data. Please try again. ``` **Variants:** `informative`, `positive`, `notice`, `negative`. ## Accessibility Quick Reference | Rule | How | | --- | --- | | Label all inputs | Use `label` prop on form fields | | Label all tables | Use `aria-label` on `TableView` | | Label all tabs | Use `aria-label` on `Tabs` | | Label icon-only buttons | Use `aria-label` on `ActionButton` | | Label loading spinners | Use `aria-label` on `ProgressCircle` | | Announce errors | Use `errorMessage` prop on form fields | | Don't rely on color alone | Pair colors with icons or text | ### ActionButton Secondary/toolbar action. ```jsx import { ActionButton } from '@adobe/react-spectrum'; ``` ### ButtonGroup Group related buttons. ```jsx import { ButtonGroup, Button } from '@adobe/react-spectrum'; ```