Coverage
74 components · 7 systems353 of 518 cells are shipped components and 165 are confirmed absences. This is the table behind the gallery: it says who ships what and how each is built, and shows none of it. The components themselves are on the group pages.
native element native + ARIA replaces native not determined absent read, not there
| Component | Ant Design | Carbon | GOV.UK | Material Web | Primer | Spectrum | USWDS |
|---|---|---|---|---|---|---|---|
| Doing | |||||||
| Button | native: yes | native: yes | native: yes | native: yes Buttons | native: yes | native: yes | native: yes |
| Button group | native: partly Space.Compact (Button.Group is deprecated) | native: no ButtonSet | native: no Button group (section of the Button page) | absent | native: no ButtonGroup | native: partly | native: yes |
| Menu button | native: no Dropdown (and Dropdown.Button) | native: partly | absent | absent | native: yes ActionMenu | native: partly Action menu | absent |
| Bulk actions | absent | native: no TableBatchActions | absent | absent | absent | native: no Action bar | absent |
| Floating action button | native: yes FloatButton | absent | absent | native: yes FAB (<md-fab>) + Branded FAB (<md-branded-fab>) | absent | native: yes | absent |
| Choosing | |||||||
| Select | native: partly | native: yes | native: yes | native: no | native: yes | native: partly Picker | native: yes |
| Checkbox | native: yes | native: yes | native: yes Checkboxes | native: yes | native: yes | native: yes | native: yes |
| Radio button | native: yes Radio | native: yes | native: yes Radios | native: no | native: yes Radio | native: no | native: yes Radio buttons |
| Checkbox group | native: partly Checkbox.Group | native: yes CheckboxGroup | native: yes Checkboxes | absent | native: yes CheckboxGroup | native: partly | native: yes Checkbox |
| Slider | native: no | native: partly | absent | native: yes Sliders (<md-slider>) | absent | native: yes | native: yes Range slider |
| Toggle | native: partly Switch | native: partly | absent | native: partly Switch | native: partly ToggleSwitch | native: partly Switch | absent |
| Content switcher | native: partly Segmented | native: partly | absent | absent | native: partly SegmentedControl | native: partly Segmented control | native: yes Button group (segmented) |
| Radio button group | native: partly Radio.Group | native: yes RadioButtonGroup | native: yes Radios | absent | native: yes RadioGroup | native: partly Radio group | native: yes Radio buttons |
| Filters | absent | absent | absent | absent | absent | absent | absent |
| Selectable tag | native: no Tag.CheckableTag | native: yes | absent | native: partly Filter chip (<md-filter-chip>) | absent | native: no Tag group (selectionMode) | absent |
| Entering | |||||||
| Text input | native: yes Input | native: yes | native: yes | native: yes Text field | native: yes TextInput | native: yes Text field | native: yes |
| Autocomplete | native: partly | native: partly Combo box | absent | absent | native: partly | native: partly Combo box | native: partly Combo box |
| File uploader | native: partly Upload | native: yes | native: yes File upload | absent | absent | native: partly Drop zone | native: yes File input |
| Search | native: yes Input.Search | native: yes | absent | absent | absent | native: yes Search field | native: yes |
| Date picker | native: partly DatePicker | native: partly | native: partly Date input | absent | absent | native: partly | native: partly |
| Number input | native: partly InputNumber | native: yes | absent | native: yes Text field, type="number" | absent | native: partly Number field | absent |
| Password input | native: yes Input.Password | native: yes | native: yes | native: yes Text field, type="password" | absent | absent | native: yes Password show/hide toggle (usa-show-password) |
| Time picker | native: partly TimePicker | native: yes | absent | absent | absent | native: no TimeField | native: partly |
| Color picker | native: no ColorPicker | absent | absent | absent | absent | native: partly | absent |
| Input group | native: partly Space.Compact (Input.Group is deprecated) | absent | native: yes Text input (prefix and suffix options) | absent | native: yes TextInput | absent | native: yes Input prefix/suffix |
| Forms | |||||||
| Form | native: yes | native: yes | absent | absent | absent | native: yes | native: yes |
| Form field | native: partly Form.Item | native: no FormItem | native: no Form group (CSS object, undocumented) | native: no Filled field / Outlined field (<md-filled-field>, <md-outlined-field>) | native: no FormControl | absent | native: no Form group |
| Error message | native: no Form.Item validation text (Form.ErrorList for Form.List) | absent | native: yes | absent | native: no FormControl.Validation | native: no Help text (negative / error) | native: no |
| Fieldset | absent | native: yes Form group | native: yes | absent | absent | native: no Field group | native: yes |
| Form label | native: yes Form.Item label prop | native: yes FormLabel | native: yes Label | absent | native: yes FormControl.Label | native: yes Field label | native: yes Label |
| Helper text | native: no Form.Item extra / help | absent | native: no Hint | absent | native: no FormControl.Caption | native: no Help text | native: no Hint |
| Interrupting and annotating | |||||||
| Modal | native: no | native: partly | absent | native: partly Dialogs | native: no Dialog | native: no Standard dialog | native: no |
| Inline notification | native: no Alert | native: no | native: no Notification banner | absent | native: no Banner | native: no In-line alert | native: no Alert |
| Tooltip | native: no | native: no | absent | absent | native: no | native: no | native: partly |
| Popover | native: no | native: no | absent | absent | native: no | native: partly | absent |
| Toast notification | native: no Message | native: no | absent | absent | absent | native: no Toast | absent |
| Side panel | native: no Drawer | absent | absent | absent | native: no Dialog | native: no Tray | absent |
| Organising content | |||||||
| Tabs | native: no | native: partly | native: no | native: no | native: partly UnderlinePanels | native: no | absent |
| Card | native: no | native: partly | native: no Summary list (summary cards) | absent | native: no | native: no | native: no |
| Item list | native: yes List | native: yes List | native: yes Summary list | native: partly Lists (<md-list>, <md-list-item>) | native: partly ActionList | native: no List view | native: yes List |
| Accordion | native: no Collapse | native: no | native: no | absent | absent | native: partly | native: no |
| Data table | native: yes Table | native: yes | absent | absent | native: yes DataTable | native: partly Table | native: yes Table |
| Divider | native: no | absent | absent | native: no Divider (<md-divider>) | absent | native: partly | absent |
| Disclosure | native: no Collapse | native: partly Accordion item | native: yes Details | absent | native: yes Details | native: no | native: partly Accordion |
| Table | native: yes | native: yes Data table | native: yes | absent | native: yes DataTable | native: no | native: yes |
| Tree view | native: no Tree | native: no | absent | absent | native: no TreeView | native: no | absent |
| Description list | native: yes Descriptions | absent | native: yes Summary list | absent | absent | native: no Labeled value | absent |
| List | native: partly Listy (List is deprecated) | native: yes | native: yes Lists (style: govuk-list) | native: partly Lists (<md-list>, <md-list-item>) | absent | absent | native: yes |
| Navigating | |||||||
| Breadcrumb | native: yes | native: yes | native: yes Breadcrumbs | absent | native: yes Breadcrumbs | native: yes Breadcrumbs | native: yes |
| Pagination | native: partly | native: partly | native: yes | absent | native: yes | native: yes | native: yes |
| Header | native: yes Layout.Header | native: yes UI shell header | native: no GOV.UK header | absent | native: yes | native: unread | native: yes |
| Link | native: yes Typography.Link | native: yes | native: yes Back link; Skip link | absent | native: yes | native: yes | native: yes |
| Side navigation | native: no Menu (mode="inline") inside Layout.Sider | native: yes UI shell left panel | absent | absent | native: yes NavList | native: partly | native: yes |
| Menu | native: no Dropdown | native: no | absent | native: partly Menus (<md-menu>, <md-menu-item>, <md-sub-menu>) | native: partly ActionMenu | native: no | absent |
| Navigation bar | native: no Menu (mode="horizontal") | native: yes UI shell header navigation | native: partly Service navigation | absent | native: yes UnderlineNav | native: partly Top nav | native: yes Nav (part of Header) |
| Footer | native: yes Layout.Footer | absent | native: no GOV.UK footer | absent | absent | absent | native: yes |
| Page header | absent | native: no PageHeader | absent | absent | native: no PageHeader | absent | absent |
| Skip to content | absent | native: yes | native: yes Skip link | absent | absent | absent | native: yes Skipnav |
| Showing state and identity | |||||||
| Tag | native: partly | native: partly | native: no | native: partly Chips (assist, filter, input, suggestion) | native: no Label | native: no | native: no |
| Badge | native: no | native: no Badge indicator | native: no Tag | absent | native: no CounterLabel | native: no | native: no Tag |
| Progress bar | native: no Progress | native: no | absent | native: no Progress indicators (<md-circular-progress>, <md-linear-progress>) | native: no ProgressBar | native: no Progress bar; Progress circle | native: no Step indicator |
| Empty state | native: partly Empty | native: no Empty states | absent | absent | native: no Blankslate | native: no Illustrated message | absent |
| Avatar | native: no | absent | absent | absent | native: yes | native: yes | absent |
| Dismissible tag | native: no Tag (with closeIcon / onClose) | native: partly | absent | native: partly Input chip (<md-input-chip>) | native: partly Token | native: no Tag (removable) | absent |
| Spinner | native: no Spin | native: no Loading | absent | native: no Circular progress, indeterminate (<md-circular-progress indeterminate>) | native: no | native: no Progress circle (indeterminate) | absent |
| Step indicator | native: no Steps | native: partly Progress indicator | absent | absent | absent | native: no Step list | native: yes |
| Tag group | native: no Tag.CheckableTagGroup | native: no Tag overflow | absent | native: no Chip set (<md-chip-set>) | native: yes LabelGroup | native: no | absent |
| Avatar group | native: no Avatar.Group | absent | absent | absent | native: no AvatarStack | native: no | absent |
| Skeleton | native: no | native: no Skeleton text, icon, placeholder | absent | absent | native: no SkeletonBox, SkeletonText, SkeletonAvatar | native: no | absent |
| Content | |||||||
| Heading | native: yes Typography.Title | native: yes Heading (with Section) | native: yes Headings (style: govuk-heading-*) | absent | native: yes | native: yes | absent |
| Icon | native: no | native: no Icons (@carbon/icons-react) | absent | native: no Icon (<md-icon>) | native: no Octicon | native: no | native: yes |
| Paragraph | native: no Typography.Paragraph | absent | native: yes Paragraphs (style: govuk-body) | absent | native: partly Text | native: yes Text | native: unread |
| Image | native: partly | absent | absent | absent | absent | native: yes | absent |
| Keyboard key | native: yes Typography.Text keyboard prop | absent | absent | absent | native: yes KeybindingHint | native: yes Keyboard | absent |
Where the index and the reading disagree
The canonical index was built by machine from names and one-line descriptions. Reading each system’s documentation finds the same component under another name, or finds that a mapped name is not quite the component.
- Checkbox: the index placed it on 6, reading finds 7 — missed GOV.UK
- Radio button: the index placed it on 6, reading finds 7 — missed GOV.UK
- Badge: the index placed it on 5, reading finds 6 — missed GOV.UK, USWDS — not confirmed for Material Web
- Card: the index placed it on 5, reading finds 6 — missed GOV.UK
- Checkbox group: the index placed it on 5, reading finds 6 — missed USWDS
- Form: the index placed it on 5, reading finds 4 — not confirmed for Primer
- Header: the index placed it on 5, reading finds 6 — missed Spectrum
- Inline notification: the index placed it on 5, reading finds 6 — missed GOV.UK
- Item list: the index placed it on 5, reading finds 7 — missed GOV.UK, Primer
- Link: the index placed it on 5, reading finds 6 — missed GOV.UK
- Progress bar: the index placed it on 5, reading finds 6 — missed USWDS
- Search: the index placed it on 5, reading finds 4 — not confirmed for Primer
- Side navigation: the index placed it on 5, reading finds 5 — missed Ant Design — not confirmed for Material Web
- Content switcher: the index placed it on 5, reading finds 5 — missed USWDS — not confirmed for Material Web
- Data table: the index placed it on 4, reading finds 5 — missed USWDS
- Date picker: the index placed it on 4, reading finds 5 — missed GOV.UK
- Divider: the index placed it on 4, reading finds 3 — not confirmed for GOV.UK
- Form field: the index placed it on 4, reading finds 6 — missed GOV.UK, Material Web
- Heading: the index placed it on 4, reading finds 5 — missed GOV.UK
- Icon: the index placed it on 4, reading finds 6 — missed Ant Design, Carbon
- Menu: the index placed it on 4, reading finds 5 — missed Primer
- Radio button group: the index placed it on 5, reading finds 6 — missed USWDS
- Disclosure: the index placed it on 3, reading finds 6 — missed Ant Design, Carbon, USWDS
- Dismissible tag: the index placed it on 3, reading finds 5 — missed Ant Design, Spectrum
- Error message: the index placed it on 3, reading finds 5 — missed Primer, Spectrum
- Form label: the index placed it on 4, reading finds 6 — missed Ant Design, Primer
- Navigation bar: the index placed it on 4, reading finds 6 — missed Ant Design, Carbon, GOV.UK — not confirmed for Material Web
- Number input: the index placed it on 3, reading finds 4 — missed Material Web
- Paragraph: the index placed it on 3, reading finds 5 — missed GOV.UK, Primer
- Password input: the index placed it on 3, reading finds 5 — missed Material Web, USWDS
- Spinner: the index placed it on 3, reading finds 5 — missed Material Web, Spectrum
- Table: the index placed it on 3, reading finds 6 — missed Ant Design, Primer, Spectrum
- Tag group: the index placed it on 4, reading finds 5 — missed Carbon
- Description list: the index placed it on 2, reading finds 3 — missed Spectrum
- Filters: the index placed it on 2, reading finds 0 — not confirmed for Carbon, Primer
- Helper text: the index placed it on 3, reading finds 5 — missed Ant Design, Primer
- Input group: the index placed it on 2, reading finds 4 — missed GOV.UK, Primer
- Keyboard key: the index placed it on 2, reading finds 3 — missed Ant Design
- List: the index placed it on 2, reading finds 5 — missed Ant Design, GOV.UK, Material Web
- Selectable tag: the index placed it on 3, reading finds 4 — missed Spectrum
- Skeleton: the index placed it on 3, reading finds 4 — missed Primer
- Side panel: the index placed it on 1, reading finds 3 — missed Primer, Spectrum
How these were read, and what they cannot say, is on the method page.