Components
Original components. Native semantics. One calm foundation.
Setup
Apply Flood's foundations to a part of your application.
Layout
Arrange, separate and contain interface elements.
AspectRatio
Reserved media proportions that respond to their containing width.Center
Center a constrained piece of content in both axes of an available region.Container
Centered content with token widths and logical gutters.Divider
A semantic separator with a low-emphasis visual line.Grid
An adaptive content grid with optional fixed columns.Inline
A wrapping horizontal group for related content and actions.ResizablePanels
Two panels separated by an accessible pointer and keyboard resize control.ScrollArea
Native scrolling with inset overlay scrollbars that preserve content width.Section
A named document section with a compact heading, supporting description and optional actions.Split
A responsive main-and-supporting layout with logical pane placement and container-based collapse.Stack
Vertical composition with spacing from the shared token scale.Surface
A quiet container with semantic elevation and token-based padding.Typography
Set readable text and a clear heading hierarchy.
Blockquote
A quoted passage with an optional compact attribution.Heading
Semantic heading levels with an independent visual scale.InlineCode
A small monospace code fragment that participates in running text.Kbd
A quiet native keyboard-input label for keys and shortcut hints.Text
Role-based interface text, from introductory copy to small supporting details.VisuallyHidden
Nonvisual content with optional reveal when keyboard focus enters.Actions
Trigger actions with named, accessible controls.
Button
Native actions with a clear prominence, size and interaction state.ButtonGroup
Connected actions with shared edges and ordinary keyboard focus.CommandList
Search and invoke commands with grouped results and keyboard navigation.CopyButton
A clipboard action with stable geometry and localized result feedback.IconButton
An icon-only action with a required accessible name.Toggle
A native button with a persistent pressed state.ToggleGroup
Optional single or multiple selections exposed as pressed buttons.Toolbar
A compact action panel with one Tab entry and directional keyboard navigation.Forms
Collect values, make choices and explain validation.
Calendar
One calendar with day, month and year views, without nested popups.CharacterCount
Supporting character or remaining-length feedback with an explicit over-limit message.Checkbox
A labeled native checkbox for independent choices.CheckboxGroup
A named multiple-choice group with a shared array value and native form behavior.CheckCard
A native checkbox presented as a selectable content card.ColorPicker
An RGB color editor with hex input, channel sliders and reusable presets.Combobox
Search a defined collection and commit one option while focus stays in the input.DateField
Segmented Gregorian date entry with canonical form values and explicit date validation.DatePicker
A segmented date field with an integrated calendar picker and shared form value.DateRangeField
Two segmented date fields with one ordered range and atomic form values.DateRangePicker
Paired date entry with one calendar popup for continuous interval selection.DateTimePicker
A composed civil date and wall-clock time with separate form values.DateTimeRangePicker
An ordered civil date/time range with four atomic form values.Dropzone
A file drop target composed with the native Flood FileInput.Editable
Inline editing with explicit save/cancel and a committed form value.Field
The association between a visible label, its input and supporting messages.Fieldset
A native group with a legend, shared descriptions and disabled form behavior.FileInput
A native file picker with a compact selection summary and one clear action.Input
A native input with semantic styling and independent visual sizing.InputGroup
One native text input with logical start/end content inside a shared perimeter.Label
A native label that connects a visible name to a control.ListBox
A named single or multiple selection list with native validation and semantic feedback.MultiSelect
Search a collection, choose multiple values and manage them as removable tags.NumberInput
A native numeric field with integrated decrement and increment actions.PasswordInput
A password field with one named visibility action.PinInput
One native code editor presented as a compact row of character slots.Radio
A labeled native radio for one choice within a group.RadioCard
A native radio choice presented as a selectable content card.RadioGroup
A named single-choice group with native radio keyboard and form behavior.RangeCalendar
A Gregorian grid for selecting and previewing one continuous date interval.Rating
A compact star rating backed by a named native radio group.SearchInput
A native search field with a leading search icon and one clear action.SegmentedControl
A compact single-value choice with native radio semantics and a shared inset surface.Select
A Flood choice field with its own popup and native form integration.Slider
One value or an ordered range with native keyboard controls on a shared rail.Switch
A labeled on/off setting with native checkbox form behavior.TagInput
Free-form text tokens with keyboard entry, removal and named form values.Textarea
Native multiline input for notes and longer text.TimeField
Segmented 24-hour time entry with canonical values, bounds and a seconds-based step.TimePicker
A segmented time field with an anchored, keyboard-accessible list of clock times.Tree
A selectable application hierarchy with independent expansion and keyboard focus.TreeSelect
Single selection from a hierarchical collection inside a popup.Content
Present icons, code and supporting information.
Accordion
Related disclosure sections with optional single or multiple expansion.Avatar
A stable identity image with initials or an explicit text fallback.AvatarGroup
A compact collection of avatars with an accessible overflow count.Badge
A compact, noninteractive label for status and metadata.Card
A structured surface for a heading, supporting content and independent actions.CodeSnippet
Selectable, wrapping code with an optional host-owned action.Collapsible
A named disclosure button and retained show/hide panel.ColorSwatch
A named sample of an opaque RGB color.DataList
A native list of structured rows with independent links and actions.DataListItem
A structured list row with media, supporting text, metadata and actions.DataTable
A native data table with local sorting, page-scoped selection and pagination.DescriptionList
Related terms and descriptions with native list semantics and responsive grouping.Figure
A native figure that keeps media and its caption together.FileItem
A named file row with size, type, thumbnail and independent actions.FileList
A named native list of file rows.FileMeta
A compact combined file-format and byte-size chip.IconSlot
Consistent geometry for a host-supplied SVG icon.Image
A native responsive image with explicit alternative text and media fitting.List
Native ordered or unordered content with token spacing and optional markers.Metric
A labeled value with optional contextual trend and supporting text.Table
A native data table with caption, density and a protected horizontal scroll area.Tag
A compact label with an optional icon and a named removal action.Timeline
An ordered sequence of events with state, context and optional time labels.Overlays
Provide contextual help, floating content and modal tasks.
AlertDialog
A focused confirmation with explicit cancel and continue actions.ContextMenu
Context actions at the pointer or keyboard target, sharing the Menu interaction engine.Dialog
A named native modal dialog with inert background and managed focus.Drawer
A modal edge panel with a steady header, scrollable body and optional footer.HoverCard
A focusable preview that opens on hover, keyboard focus or explicit activation.ImagePreview
A single-image preview in Flood Dialog with loading and failure feedback.Menu
An action and preference menu with keyboard navigation and controlled checkbox/radio items.Popover
A nonmodal contextual dialog in the native top layer.Tooltip
Brief text help on hover or focus, with collision-aware placement.Feedback
Explain loading, progress and changes in state.
Alert
An inline message with a quiet boundary and explicit announcement priority.EmptyState
A quiet explanation and optional next action when content is absent.ErrorSummary
A linked validation summary that focuses host-owned invalid fields.Meter
A measured value within a meaningful, finite range.Progress
Completion of a task, with a determinate or unknown value.Skeleton
A decorative placeholder that reserves space for loading content.Spinner
A sized loading indicator with an optional accessible status label.StatusIndicator
A named state with a small decorative indicator, without a badge container.ToastRegion
A host-controlled notification queue with timed, pausable messages and actions.UploadItem
A host-controlled upload row with explicit progress and applicable actions.UploadList
A named native list of host-controlled upload rows.