# Components

Original React components with native semantics. Connect the package once, then import the components you use.

## Setup

Apply Flood's foundations to a part of your application.

- [FloodRoot](https://flood.md/components/flood-root): An explicit scope for the neutral dark foundations profile.

## Layout

Arrange, separate and contain interface elements.

- [AspectRatio](https://flood.md/components/aspect-ratio): Reserved media proportions that respond to their containing width.
- [Center](https://flood.md/components/center): Center a constrained piece of content in both axes of an available region.
- [Container](https://flood.md/components/container): Centered content with token widths and logical gutters.
- [Divider](https://flood.md/components/divider): A semantic separator with a low-emphasis visual line.
- [Grid](https://flood.md/components/grid): An adaptive content grid with optional fixed columns.
- [Inline](https://flood.md/components/inline): A wrapping horizontal group for related content and actions.
- [ResizablePanels](https://flood.md/components/resizable-panels): Two panels separated by an accessible pointer and keyboard resize control.
- [ScrollArea](https://flood.md/components/scroll-area): Native scrolling with inset overlay scrollbars that preserve content width.
- [Section](https://flood.md/components/section): A named document section with a compact heading, supporting description and optional actions.
- [Split](https://flood.md/components/split): A responsive main-and-supporting layout with logical pane placement and container-based collapse.
- [Stack](https://flood.md/components/stack): Vertical composition with spacing from the shared token scale.
- [Surface](https://flood.md/components/surface): A quiet container with semantic elevation and token-based padding.

## Typography

Set readable text and a clear heading hierarchy.

- [Blockquote](https://flood.md/components/blockquote): A quoted passage with an optional compact attribution.
- [Heading](https://flood.md/components/heading): Semantic heading levels with an independent visual scale.
- [InlineCode](https://flood.md/components/inline-code): A small monospace code fragment that participates in running text.
- [Kbd](https://flood.md/components/kbd): A quiet native keyboard-input label for keys and shortcut hints.
- [Text](https://flood.md/components/text): Role-based interface text, from introductory copy to small supporting details.
- [VisuallyHidden](https://flood.md/components/visually-hidden): Nonvisual content with optional reveal when keyboard focus enters.

## Actions

Trigger actions with named, accessible controls.

- [Button](https://flood.md/components/button): Native actions with a clear prominence, size and interaction state.
- [ButtonGroup](https://flood.md/components/button-group): Connected actions with shared edges and ordinary keyboard focus.
- [CommandList](https://flood.md/components/command-list): Search and invoke commands with grouped results and keyboard navigation.
- [CopyButton](https://flood.md/components/copy-button): A clipboard action with stable geometry and localized result feedback.
- [IconButton](https://flood.md/components/icon-button): An icon-only action with a required accessible name.
- [Toggle](https://flood.md/components/toggle): A native button with a persistent pressed state.
- [ToggleGroup](https://flood.md/components/toggle-group): Optional single or multiple selections exposed as pressed buttons.
- [Toolbar](https://flood.md/components/toolbar): A compact action panel with one Tab entry and directional keyboard navigation.

## Forms

Collect values, make choices and explain validation.

- [Calendar](https://flood.md/components/calendar): One calendar with day, month and year views, without nested popups.
- [CharacterCount](https://flood.md/components/character-count): Supporting character or remaining-length feedback with an explicit over-limit message.
- [Checkbox](https://flood.md/components/checkbox): A labeled native checkbox for independent choices.
- [CheckboxGroup](https://flood.md/components/checkbox-group): A named multiple-choice group with a shared array value and native form behavior.
- [CheckCard](https://flood.md/components/check-card): A native checkbox presented as a selectable content card.
- [ColorPicker](https://flood.md/components/color-picker): An RGB color editor with hex input, channel sliders and reusable presets.
- [Combobox](https://flood.md/components/combobox): Search a defined collection and commit one option while focus stays in the input.
- [DateField](https://flood.md/components/date-field): Segmented Gregorian date entry with canonical form values and explicit date validation.
- [DatePicker](https://flood.md/components/date-picker): A segmented date field with an integrated calendar picker and shared form value.
- [DateRangeField](https://flood.md/components/date-range-field): Two segmented date fields with one ordered range and atomic form values.
- [DateRangePicker](https://flood.md/components/date-range-picker): Paired date entry with one calendar popup for continuous interval selection.
- [DateTimePicker](https://flood.md/components/date-time-picker): A composed civil date and wall-clock time with separate form values.
- [DateTimeRangePicker](https://flood.md/components/date-time-range-picker): An ordered civil date/time range with four atomic form values.
- [Dropzone](https://flood.md/components/dropzone): A file drop target composed with the native Flood FileInput.
- [Editable](https://flood.md/components/editable): Inline editing with explicit save/cancel and a committed form value.
- [Field](https://flood.md/components/field): The association between a visible label, its input and supporting messages.
- [Fieldset](https://flood.md/components/fieldset): A native group with a legend, shared descriptions and disabled form behavior.
- [FileInput](https://flood.md/components/file-input): A native file picker with a compact selection summary and one clear action.
- [Input](https://flood.md/components/input): A native input with semantic styling and independent visual sizing.
- [InputGroup](https://flood.md/components/input-group): One native text input with logical start/end content inside a shared perimeter.
- [Label](https://flood.md/components/label): A native label that connects a visible name to a control.
- [ListBox](https://flood.md/components/list-box): A named single or multiple selection list with native validation and semantic feedback.
- [MultiSelect](https://flood.md/components/multi-select): Search a collection, choose multiple values and manage them as removable tags.
- [NumberInput](https://flood.md/components/number-input): A native numeric field with integrated decrement and increment actions.
- [PasswordInput](https://flood.md/components/password-input): A password field with one named visibility action.
- [PinInput](https://flood.md/components/pin-input): One native code editor presented as a compact row of character slots.
- [Radio](https://flood.md/components/radio): A labeled native radio for one choice within a group.
- [RadioCard](https://flood.md/components/radio-card): A native radio choice presented as a selectable content card.
- [RadioGroup](https://flood.md/components/radio-group): A named single-choice group with native radio keyboard and form behavior.
- [RangeCalendar](https://flood.md/components/range-calendar): A Gregorian grid for selecting and previewing one continuous date interval.
- [Rating](https://flood.md/components/rating): A compact star rating backed by a named native radio group.
- [SearchInput](https://flood.md/components/search-input): A native search field with a leading search icon and one clear action.
- [SegmentedControl](https://flood.md/components/segmented-control): A compact single-value choice with native radio semantics and a shared inset surface.
- [Select](https://flood.md/components/select): A Flood choice field with its own popup and native form integration.
- [Slider](https://flood.md/components/slider): One value or an ordered range with native keyboard controls on a shared rail.
- [Switch](https://flood.md/components/switch): A labeled on/off setting with native checkbox form behavior.
- [TagInput](https://flood.md/components/tag-input): Free-form text tokens with keyboard entry, removal and named form values.
- [Textarea](https://flood.md/components/textarea): Native multiline input for notes and longer text.
- [TimeField](https://flood.md/components/time-field): Segmented 24-hour time entry with canonical values, bounds and a seconds-based step.
- [TimePicker](https://flood.md/components/time-picker): A segmented time field with an anchored, keyboard-accessible list of clock times.
- [Tree](https://flood.md/components/tree): A selectable application hierarchy with independent expansion and keyboard focus.
- [TreeSelect](https://flood.md/components/tree-select): Single selection from a hierarchical collection inside a popup.

## Navigation

Move between destinations and resources.

- [Breadcrumb](https://flood.md/components/breadcrumb): A wrapping hierarchy of native links with an explicit current page.
- [Link](https://flood.md/components/link): A native anchor for navigation.
- [NavigationList](https://flood.md/components/navigation-list): A grouped list of native navigation links with a clear current destination.
- [NavigationTree](https://flood.md/components/navigation-tree): Nested native navigation links with separate disclosure controls.
- [Pagination](https://flood.md/components/pagination): Controlled page navigation with bounded page windows, buttons or native links.
- [SkipLink](https://flood.md/components/skip-link): A native skip-navigation link revealed on focus and aimed at a page content target.
- [Steps](https://flood.md/components/steps): An ordered progress sequence with explicit current, completed, upcoming and error states.
- [Tabs](https://flood.md/components/tabs): Connected tab buttons and retained content panels with roving keyboard focus.

## Content

Present icons, code and supporting information.

- [Accordion](https://flood.md/components/accordion): Related disclosure sections with optional single or multiple expansion.
- [Avatar](https://flood.md/components/avatar): A stable identity image with initials or an explicit text fallback.
- [AvatarGroup](https://flood.md/components/avatar-group): A compact collection of avatars with an accessible overflow count.
- [Badge](https://flood.md/components/badge): A compact, noninteractive label for status and metadata.
- [Card](https://flood.md/components/card): A structured surface for a heading, supporting content and independent actions.
- [CodeSnippet](https://flood.md/components/code-snippet): Selectable, wrapping code with an optional host-owned action.
- [Collapsible](https://flood.md/components/collapsible): A named disclosure button and retained show/hide panel.
- [ColorSwatch](https://flood.md/components/color-swatch): A named sample of an opaque RGB color.
- [DataList](https://flood.md/components/data-list): A native list of structured rows with independent links and actions.
- [DataListItem](https://flood.md/components/data-list-item): A structured list row with media, supporting text, metadata and actions.
- [DataTable](https://flood.md/components/data-table): A native data table with local sorting, page-scoped selection and pagination.
- [DescriptionList](https://flood.md/components/description-list): Related terms and descriptions with native list semantics and responsive grouping.
- [Figure](https://flood.md/components/figure): A native figure that keeps media and its caption together.
- [FileItem](https://flood.md/components/file-item): A named file row with size, type, thumbnail and independent actions.
- [FileList](https://flood.md/components/file-list): A named native list of file rows.
- [FileMeta](https://flood.md/components/file-meta): A compact combined file-format and byte-size chip.
- [IconSlot](https://flood.md/components/icon-slot): Consistent geometry for a host-supplied SVG icon.
- [Image](https://flood.md/components/image): A native responsive image with explicit alternative text and media fitting.
- [List](https://flood.md/components/list): Native ordered or unordered content with token spacing and optional markers.
- [Metric](https://flood.md/components/metric): A labeled value with optional contextual trend and supporting text.
- [Table](https://flood.md/components/table): A native data table with caption, density and a protected horizontal scroll area.
- [Tag](https://flood.md/components/tag): A compact label with an optional icon and a named removal action.
- [Timeline](https://flood.md/components/timeline): An ordered sequence of events with state, context and optional time labels.

## Overlays

Provide contextual help, floating content and modal tasks.

- [AlertDialog](https://flood.md/components/alert-dialog): A focused confirmation with explicit cancel and continue actions.
- [ContextMenu](https://flood.md/components/context-menu): Context actions at the pointer or keyboard target, sharing the Menu interaction engine.
- [Dialog](https://flood.md/components/dialog): A named native modal dialog with inert background and managed focus.
- [Drawer](https://flood.md/components/drawer): A modal edge panel with a steady header, scrollable body and optional footer.
- [HoverCard](https://flood.md/components/hover-card): A focusable preview that opens on hover, keyboard focus or explicit activation.
- [ImagePreview](https://flood.md/components/image-preview): A single-image preview in Flood Dialog with loading and failure feedback.
- [Menu](https://flood.md/components/menu): An action and preference menu with keyboard navigation and controlled checkbox/radio items.
- [Popover](https://flood.md/components/popover): A nonmodal contextual dialog in the native top layer.
- [Tooltip](https://flood.md/components/tooltip): Brief text help on hover or focus, with collision-aware placement.

## Feedback

Explain loading, progress and changes in state.

- [Alert](https://flood.md/components/alert): An inline message with a quiet boundary and explicit announcement priority.
- [EmptyState](https://flood.md/components/empty-state): A quiet explanation and optional next action when content is absent.
- [ErrorSummary](https://flood.md/components/error-summary): A linked validation summary that focuses host-owned invalid fields.
- [Meter](https://flood.md/components/meter): A measured value within a meaningful, finite range.
- [Progress](https://flood.md/components/progress): Completion of a task, with a determinate or unknown value.
- [Skeleton](https://flood.md/components/skeleton): A decorative placeholder that reserves space for loading content.
- [Spinner](https://flood.md/components/spinner): A sized loading indicator with an optional accessible status label.
- [StatusIndicator](https://flood.md/components/status-indicator): A named state with a small decorative indicator, without a badge container.
- [ToastRegion](https://flood.md/components/toast-region): A host-controlled notification queue with timed, pausable messages and actions.
- [UploadItem](https://flood.md/components/upload-item): A host-controlled upload row with explicit progress and applicable actions.
- [UploadList](https://flood.md/components/upload-list): A named native list of host-controlled upload rows.