Components

The components section documents the reusable building blocks and authored-content patterns in the FDIC design system.

Component overview

Use this section for implementation guidance, usage constraints, accessibility notes, and examples. Foundations explain the underlying rules; components show how those rules are applied in real interfaces and real content.

Current component groups

Forms & Input

Label, Field, Form Field, Infotip, Message, Input, Text Area, Selector, Checkbox, Checkbox Group, Radio, Radio Group, Slider, File Input

Data-entry controls and composition helpers for labels, grouping, validation, and supporting guidance.

Actions & Navigation

Link, Button, Button Group, Split Button, Menu, Pagination, Sidebar Nav, Tile, Sidebar Menu, Tile List, Event, Link Category, Event List, Org Outline

Controls and navigation patterns that trigger actions, expose destinations, or move people through flows.

Feedback & Status

Alert, Page Feedback, Badge, Badge Group, Chip, Chip Group, Error Summary, Review List, Confirmation Record, Org Details

Components that communicate status, lightweight emphasis, selection context, or supporting state.

Layout & Shell

Global Header, Header Search, Drawer, Page Header, Hero, Card Group, Stripe, Global Footer

Shell-level and structural components for headers, drawers, search surfaces, and grouped layout treatments.

Visual & Media

Card, Social Media Item, Visual, Icon, Social Media List, Media Item, Person, Media List

Icons and visual primitives that support other components and layouts without becoming full authored-content patterns.

Authored content

Prose

The .prose topic covers long-form content styling, document navigation, references, and supporting patterns for articles, policy content, and technical guidance.

These docs group public components by the job they do in an interface. The underlying implementation taxonomy still distinguishes first-class components from supporting primitives for export and composition rules.

Embedded-only supporting primitives such as fd-menu-item and fd-option are documented inside their parent component pages instead of appearing as top-level entries. Internal-only scaffolding primitives such as fd-placeholder are not part of the public component inventory.

Featured topics

• Prose explains the .prose container, its boundary with Typography, and the specialized pages for callouts, tables, code blocks, references, disclosure patterns, and progress indicators.

Forms & Input

• Label documents label usage, constraints, and accessibility guidance.
• Field documents the supporting primitive contract for field.
• Form Field documents the supporting primitive contract for form field.
• Infotip documents the supporting primitive contract for infotip.
• Message documents the supporting primitive contract for message.
• Input documents input usage, constraints, and accessibility guidance.
• Text Area documents text area usage, constraints, and accessibility guidance.
• Selector documents selector usage, constraints, and accessibility guidance.
• Checkbox documents checkbox usage, constraints, and accessibility guidance.
• Checkbox Group documents checkbox group usage, constraints, and accessibility guidance.
• Radio documents radio usage, constraints, and accessibility guidance.
• Radio Group documents radio group usage, constraints, and accessibility guidance.
• Slider documents slider usage, constraints, and accessibility guidance.
• File Input documents file input usage, constraints, and accessibility guidance.

Actions & Navigation

• Link documents link usage, constraints, and accessibility guidance.
• Button documents button usage, constraints, and accessibility guidance.
• Button Group documents button group usage, constraints, and accessibility guidance.
• Split Button documents split button usage, constraints, and accessibility guidance.
• Menu documents menu usage, constraints, and accessibility guidance.
• Pagination documents pagination usage, constraints, and accessibility guidance.
• Sidebar Nav documents sidebar nav usage, constraints, and accessibility guidance.
• Tile documents tile usage, constraints, and accessibility guidance.
• Sidebar Menu documents sidebar menu usage, constraints, and accessibility guidance.
• Tile List documents tile list usage, constraints, and accessibility guidance.
• Event documents event usage, constraints, and accessibility guidance.
• Link Category documents link category usage, constraints, and accessibility guidance.
• Event List documents event list usage, constraints, and accessibility guidance.
• Org Outline documents org outline usage, constraints, and accessibility guidance.

Feedback & Status

• Alert documents alert usage, constraints, and accessibility guidance.
• Page Feedback documents page feedback usage, constraints, and accessibility guidance.
• Badge documents badge usage, constraints, and accessibility guidance.
• Badge Group documents badge group usage, constraints, and accessibility guidance.
• Chip documents chip usage, constraints, and accessibility guidance.
• Chip Group documents chip group usage, constraints, and accessibility guidance.
• Error Summary documents the supporting primitive contract for error summary.
• Review List documents the supporting primitive contract for review list.
• Confirmation Record documents the supporting primitive contract for confirmation record.
• Org Details documents org details usage, constraints, and accessibility guidance.

Layout & Shell

• Global Header documents global header usage, constraints, and accessibility guidance.
• Header Search documents the supporting primitive contract for header search.
• Drawer documents the supporting primitive contract for drawer.
• Page Header documents page header usage, constraints, and accessibility guidance.
• Hero documents hero usage, constraints, and accessibility guidance.
• Card Group documents card group usage, constraints, and accessibility guidance.
• Stripe documents the supporting primitive contract for stripe.
• Global Footer documents global footer usage, constraints, and accessibility guidance.

Visual & Media

• Card documents card usage, constraints, and accessibility guidance.
• Social Media Item documents social media item usage, constraints, and accessibility guidance.
• Visual documents the supporting primitive contract for visual.
• Icon documents icon usage, constraints, and accessibility guidance.
• Social Media List documents social media list usage, constraints, and accessibility guidance.
• Media Item documents media item usage, constraints, and accessibility guidance.
• Person documents person usage, constraints, and accessibility guidance.
• Media List documents media list usage, constraints, and accessibility guidance.