# Components Every component in OODS Foundry 0.10.1: 114, each with its contract, a live React and Vue render, and its readiness evidence. Generated from @oods/foundry 0.10.1 ## behavioral - [FilterPanel](https://oods-foundry.com/components/filter-panel) Groups filter controls and their explanatory content. `react-and-vue` - [PaginationBar](https://oods-foundry.com/components/pagination-bar) Navigates between pages of a collection. `proven-in-generated-apps` - [SearchInput](https://oods-foundry.com/components/search-input) Edits a search query for a collection. `proven-in-generated-apps` - [SortIndicator](https://oods-foundry.com/components/sort-indicator) Shows a collection column's current sort direction. `react-and-vue` - [TagInput](https://oods-foundry.com/components/tag-input) Edits the tags assigned to a record. `proven-in-generated-apps` - [TagManager](https://oods-foundry.com/components/tag-manager) Presents a list of tags with tag editing controls. `react-and-vue` - [TagPills](https://oods-foundry.com/components/tag-pills) Displays tags as individual compact labels. `proven-in-generated-apps` - [TagSummary](https://oods-foundry.com/components/tag-summary) Summarizes a record's tags. `proven-in-generated-apps` ## communication - [CommunicationDetailPanel](https://oods-foundry.com/components/communication-detail-panel) Displays a communication's recipients, channel and content. `proven-in-generated-apps` - [MessageEventTimeline](https://oods-foundry.com/components/message-event-timeline) Lists recorded events in a message's lifecycle. `react-and-vue` - [MessageStatusBadge](https://oods-foundry.com/components/message-status-badge) Shows a message's delivery status. `react-and-vue` - [TemplatePicker](https://oods-foundry.com/components/template-picker) Selects a template from supplied choices. `proven-in-generated-apps` ## content - [CardHeader](https://oods-foundry.com/components/card-header) Labels a card with a title and supporting text. `proven-in-generated-apps` - [DetailHeader](https://oods-foundry.com/components/detail-header) Names a record with a heading and optional supporting text. `proven-in-generated-apps` - [FormLabelGroup](https://oods-foundry.com/components/form-label-group) Groups a form label with supporting text. `react-and-vue` - [InlineLabel](https://oods-foundry.com/components/inline-label) Displays a compact record label within a line of text. `proven-in-generated-apps` - [LabelCell](https://oods-foundry.com/components/label-cell) Shows a record label in a collection cell. `proven-in-generated-apps` - [TimelineEntryLabel](https://oods-foundry.com/components/timeline-entry-label) Labels a timeline entry with a title and supporting text. `proven-in-generated-apps` ## core - [AddressCollectionPanel](https://oods-foundry.com/components/address-collection-panel) Groups an address heading, summary and authored address content. `proven-in-generated-apps` - [AddressEditor](https://oods-foundry.com/components/address-editor) Edits street, city, region and postal code through labelled inputs. `proven-in-generated-apps` - [AddressSummaryBadge](https://oods-foundry.com/components/address-summary-badge) Shows a compact address label or role. `react-and-vue` - [AddressValidationTimeline](https://oods-foundry.com/components/address-validation-timeline) Lists recorded address validation events in time order. `react-and-vue` - [ClassificationBadge](https://oods-foundry.com/components/classification-badge) Shows a compact classification label. `react-and-vue` - [ClassificationEditor](https://oods-foundry.com/components/classification-editor) Presents category, tags and classification mode controls. `proven-in-generated-apps` - [ClassificationPanel](https://oods-foundry.com/components/classification-panel) Groups classification details and authored category content. `proven-in-generated-apps` - [MembershipAuditTimeline](https://oods-foundry.com/components/membership-audit-timeline) Lists recorded membership changes over time. `react-and-vue` - [MembershipPanel](https://oods-foundry.com/components/membership-panel) Groups membership information and authored content. `proven-in-generated-apps` - [PreferenceEditor](https://oods-foundry.com/components/preference-editor) Presents controls for a preference record. `proven-in-generated-apps` - [PreferencePanel](https://oods-foundry.com/components/preference-panel) Groups preference details and authored content. `proven-in-generated-apps` - [PreferenceSummaryBadge](https://oods-foundry.com/components/preference-summary-badge) Shows a compact preference summary. `react-and-vue` - [PreferenceTimeline](https://oods-foundry.com/components/preference-timeline) Lists recorded preference changes over time. `react-and-vue` - [RelativeTimestamp](https://oods-foundry.com/components/relative-timestamp) Displays a timestamp relative to a reference time. `proven-in-generated-apps` - [RoleAssignmentForm](https://oods-foundry.com/components/role-assignment-form) Presents controls for assigning a role. `proven-in-generated-apps` - [RoleBadgeList](https://oods-foundry.com/components/role-badge-list) Displays the roles assigned to a record. `react-and-vue` - [StatusBadge](https://oods-foundry.com/components/status-badge) Displays a readable lifecycle status with its semantic tone. `proven-in-generated-apps` - [Text](https://oods-foundry.com/components/text) Displays text with a chosen semantic HTML element. `proven-in-generated-apps` ## domain - [BillingCardMeta](https://oods-foundry.com/components/billing-card-meta) Shows compact billing amount and interval metadata. `proven-in-generated-apps` - [BillingSummaryBadge](https://oods-foundry.com/components/billing-summary-badge) Displays a formatted billing amount and optional interval. `proven-in-generated-apps` ## financial - [BillingAmountInput](https://oods-foundry.com/components/billing-amount-input) Edits a billing amount in the selected currency. `proven-in-generated-apps` - [BillingIntervalSelector](https://oods-foundry.com/components/billing-interval-selector) Selects the interval for a recurring charge. `proven-in-generated-apps` - [CycleProgressCard](https://oods-foundry.com/components/cycle-progress-card) Shows billing cycle progress and remaining days. `proven-in-generated-apps` - [PaymentEventTimeline](https://oods-foundry.com/components/payment-event-timeline) Lists recorded payment events and timestamps. `proven-in-generated-apps` - [PaymentTimeline](https://oods-foundry.com/components/payment-timeline) Shows payment status, method and scheduled payment dates. `proven-in-generated-apps` - [PriceBadge](https://oods-foundry.com/components/price-badge) Displays a compact formatted price. `proven-in-generated-apps` - [PriceCardMeta](https://oods-foundry.com/components/price-card-meta) Shows pricing metadata within a card. `react-and-vue` - [PriceSummary](https://oods-foundry.com/components/price-summary) Summarizes an amount, currency and pricing model. `proven-in-generated-apps` ## lifecycle - [ArchivedRowOverlay](https://oods-foundry.com/components/archived-row-overlay) Marks an archived collection row while retaining its content. `proven-in-generated-apps` - [ArchiveEvent](https://oods-foundry.com/components/archive-event) Describes an archive event with its recorded timestamp. `react-and-vue` - [ArchivePill](https://oods-foundry.com/components/archive-pill) Marks whether a record is archived. `proven-in-generated-apps` - [ArchiveSummary](https://oods-foundry.com/components/archive-summary) Shows a record's archive status and related details. `proven-in-generated-apps` - [AuditEvent](https://oods-foundry.com/components/audit-event) Shows one recorded audit event and its time. `react-and-vue` - [AuditSummaryCard](https://oods-foundry.com/components/audit-summary-card) Summarizes audit coverage and recorded results. `react-and-vue` - [AuditTimeline](https://oods-foundry.com/components/audit-timeline) Lists entries from a record's audit log. `react-and-vue` - [CancellationBadge](https://oods-foundry.com/components/cancellation-badge) Shows whether cancellation is scheduled. `proven-in-generated-apps` - [CancellationEvent](https://oods-foundry.com/components/cancellation-event) Describes a recorded cancellation and its time. `proven-in-generated-apps` - [CancellationForm](https://oods-foundry.com/components/cancellation-form) Collects a cancellation reason and code. `proven-in-generated-apps` - [CancellationSummary](https://oods-foundry.com/components/cancellation-summary) Shows the recorded cancellation terms for an item. `proven-in-generated-apps` - [StateTransitionEvent](https://oods-foundry.com/components/state-transition-event) Describes a recorded transition between lifecycle states. `react-and-vue` - [StatusSelector](https://oods-foundry.com/components/status-selector) Selects a record's lifecycle status. `proven-in-generated-apps` - [StatusTimeline](https://oods-foundry.com/components/status-timeline) Shows the current status and recorded lifecycle events. `proven-in-generated-apps` ## primitive - [Badge](https://oods-foundry.com/components/badge) Displays a short label with a semantic status treatment. `react-and-vue` - [Banner](https://oods-foundry.com/components/banner) Presents a prominent message with optional actions and dismissal. `proven-in-generated-apps` - [Button](https://oods-foundry.com/components/button) Triggers an action using a labelled native button. `proven-in-generated-apps` - [Card](https://oods-foundry.com/components/card) Groups related content within a bordered surface. `proven-in-generated-apps` - [Checkbox](https://oods-foundry.com/components/checkbox) Toggles a labelled boolean value. `proven-in-generated-apps` - [Combobox](https://oods-foundry.com/components/combobox) Picks one value from a list by typing to filter it. `react-and-vue` - [DatePicker](https://oods-foundry.com/components/date-picker) Selects a date with a labelled native control. `proven-in-generated-apps` - [Dialog](https://oods-foundry.com/components/dialog) Asks for a decision or shows focused content in a window with a title, actions and a close button. `react-and-vue` - [Grid](https://oods-foundry.com/components/grid) Arranges child content in a responsive grid. `react-and-vue` - [Input](https://oods-foundry.com/components/input) Edits a scalar value with a labelled native input. `proven-in-generated-apps` - [SegmentedControl](https://oods-foundry.com/components/segmented-control) Chooses one of two to five options shown as joined segments. `react-and-vue` - [Select](https://oods-foundry.com/components/select) Chooses one value from a labelled list of options. `proven-in-generated-apps` - [Stack](https://oods-foundry.com/components/stack) Arranges related child content vertically or horizontally. `proven-in-generated-apps` - [Switch](https://oods-foundry.com/components/switch) Turns a labelled setting on or off at once. `react-and-vue` - [Table](https://oods-foundry.com/components/table) Displays labelled columns and rows of tabular data. `react-and-vue` - [Tabs](https://oods-foundry.com/components/tabs) Switches between labelled panels of related content. `proven-in-generated-apps` - [Textarea](https://oods-foundry.com/components/textarea) Edits a multiline text value. `proven-in-generated-apps` ## structural - [OwnerBadge](https://oods-foundry.com/components/owner-badge) Shows a compact owner label or supplied identifier. `proven-in-generated-apps` - [OwnershipMeta](https://oods-foundry.com/components/ownership-meta) Displays compact ownership metadata. `proven-in-generated-apps` - [OwnershipSummary](https://oods-foundry.com/components/ownership-summary) Summarizes the recorded owner, role and transfer information. `proven-in-generated-apps` ## visual - [ColorizedBadge](https://oods-foundry.com/components/colorized-badge) Shows a label using an explicitly supplied color treatment. `react-and-vue` - [ColorStatePicker](https://oods-foundry.com/components/color-state-picker) Edits the color state of a visual encoding. `react-and-vue` - [ColorSwatch](https://oods-foundry.com/components/color-swatch) Displays a color sample with its label. `react-and-vue` - [StatusColorLegend](https://oods-foundry.com/components/status-color-legend) Explains the colors assigned to lifecycle states. `react-and-vue` ## viz.encoding - [VizAxisControls](https://oods-foundry.com/components/viz-axis-controls) Edits axis labels, visibility and formatting. `react-and-vue` - [VizAxisSummary](https://oods-foundry.com/components/viz-axis-summary) Summarizes the configured chart axes. `react-and-vue` - [VizColorControls](https://oods-foundry.com/components/viz-color-controls) Edits the chart's color encoding. `react-and-vue` - [VizColorLegendConfig](https://oods-foundry.com/components/viz-color-legend-config) Configures the chart's color legend. `react-and-vue` - [VizEncodingBadge](https://oods-foundry.com/components/viz-encoding-badge) Labels a field's visual encoding. `react-and-vue` - [VizOpacityControls](https://oods-foundry.com/components/viz-opacity-controls) Edits the chart's opacity encoding. `react-and-vue` - [VizOpacitySummary](https://oods-foundry.com/components/viz-opacity-summary) Summarizes the configured opacity encoding. `react-and-vue` - [VizShapeControls](https://oods-foundry.com/components/viz-shape-controls) Edits the chart's shape encoding. `react-and-vue` - [VizShapeLegend](https://oods-foundry.com/components/viz-shape-legend) Explains the shapes assigned to chart categories. `react-and-vue` - [VizSizeControls](https://oods-foundry.com/components/viz-size-controls) Edits the chart's size encoding. `react-and-vue` - [VizSizeSummary](https://oods-foundry.com/components/viz-size-summary) Summarizes the configured size encoding. `react-and-vue` ## viz.mark - [VizAreaControls](https://oods-foundry.com/components/viz-area-controls) Edits the settings for an area chart. `react-and-vue` - [VizAreaPreview](https://oods-foundry.com/components/viz-area-preview) Displays an area chart from bound chart data. `react-and-vue` - [VizGraphPreview](https://oods-foundry.com/components/viz-graph-preview) Displays a graph or network chart from bound data. `proven-in-generated-apps` - [VizHeatmapControls](https://oods-foundry.com/components/viz-heatmap-controls) Edits the settings for a heatmap. `react-and-vue` - [VizHeatmapPreview](https://oods-foundry.com/components/viz-heatmap-preview) Displays a heatmap from bound chart data. `react-and-vue` - [VizLineControls](https://oods-foundry.com/components/viz-line-controls) Edits the settings for a line chart. `react-and-vue` - [VizLinePreview](https://oods-foundry.com/components/viz-line-preview) Displays a line chart from bound chart data. `proven-in-generated-apps` - [VizMarkControls](https://oods-foundry.com/components/viz-mark-controls) Edits the mark settings for a chart. `react-and-vue` - [VizMarkPreview](https://oods-foundry.com/components/viz-mark-preview) Displays a chart using the bound mark specification. `proven-in-generated-apps` - [VizPointControls](https://oods-foundry.com/components/viz-point-controls) Edits the settings for point marks. `react-and-vue` - [VizPointPreview](https://oods-foundry.com/components/viz-point-preview) Displays point marks from bound chart data. `react-and-vue` - [VizRoleBadge](https://oods-foundry.com/components/viz-role-badge) Labels a field's role in a chart. `react-and-vue` ## viz.pattern - [VizScatterControls](https://oods-foundry.com/components/viz-scatter-controls) Edits the settings for a scatter plot. `react-and-vue` - [VizScatterPreview](https://oods-foundry.com/components/viz-scatter-preview) Displays a scatter plot from bound chart data. `react-and-vue` ## viz.scale - [VizScaleControls](https://oods-foundry.com/components/viz-scale-controls) Edits scale settings for a visual encoding. `react-and-vue` - [VizScaleSummary](https://oods-foundry.com/components/viz-scale-summary) Summarizes the configured visual scales. `react-and-vue` ## viz.spatial - [GeocodablePreview](https://oods-foundry.com/components/geocodable-preview) Displays a location preview from supplied geographic data. `react-and-vue` - [GeoFieldMappingForm](https://oods-foundry.com/components/geo-field-mapping-form) Maps record fields to geographic coordinates and identifiers. `react-and-vue` - [GeoResolutionBadge](https://oods-foundry.com/components/geo-resolution-badge) Shows the resolution state of a geographic lookup. `react-and-vue` No component matches these filters.