Skip to content

component-inventory.md

Latest commit

 

History

History
1401 lines (986 loc) · 61 KB

component-inventory.md

File metadata and controls

1401 lines (986 loc) · 61 KB
title Component Inventory
description Component Inventory reference.
sidebar_position 7
generated_by typedoc
custom_edit_url

Component Inventory

Interfaces

ComponentsContextType

Full map of UI components used by the SDK. Every property is a React component that the SDK renders internally — override any of them to substitute your own design system.

Pass a Partial<ComponentsContextType> to GustoProvider via the components prop to replace specific components while keeping SDK defaults for the rest.

To take full control of every UI component (and eliminate the React Aria dependency), pass a complete ComponentsContextType to GustoProviderCustomUIAdapter instead. All properties are then required except PaginationControl and PayrollLoading, which fall back to built-in SDK implementations when omitted.

Examples

Partial override with GustoProvider

import { GustoProvider } from '@gusto/embedded-react-sdk'

function App() {
  return (
    <GustoProvider
      config={{ baseUrl: '/api/gusto/' }}
      components={{
        Button: MyButton,
        TextInput: MyTextInput,
      }}
    >
      <EmployeeOnboardingFlow companyId="company_123" />
    </GustoProvider>
  )
}

Full replacement with GustoProviderCustomUIAdapter

import { GustoProviderCustomUIAdapter, type ComponentsContextType } from '@gusto/embedded-react-sdk'

const myComponents: ComponentsContextType = {
  Alert: props => <MyAlert {...props} />,
  Button: props => <MyButton {...props} />,
  // ... all required components
}

function App() {
  return (
    <GustoProviderCustomUIAdapter
      config={{ baseUrl: '/api/gusto/' }}
      components={myComponents}
    >
      <EmployeeOnboardingFlow companyId="company_123" />
    </GustoProviderCustomUIAdapter>
  )
}

Properties

Property Type Description
Alert FunctionComponent<AlertProps> Status message with an optional dismiss action; used for errors, warnings, success, and info.
Badge FunctionComponent<BadgeProps> Small inline label for status, counts, or tags; optionally dismissible.
Banner FunctionComponent<BannerProps> Full-width notification banner for prominent warnings and errors.
Box FunctionComponent<BoxProps> Sectioned layout container with distinct header, body, and footer areas.
BoxHeader FunctionComponent<BoxHeaderProps> Header section of a Box with a title, optional description, and optional inline action.
Breadcrumbs FunctionComponent<BreadcrumbsProps> Navigation breadcrumb trail showing the user's position in a multi-step flow.
Button FunctionComponent<ButtonProps> HTML <button> with primary, secondary, tertiary, and error variants.
ButtonIcon FunctionComponent<ButtonIconProps> Icon-only <button>; requires aria-label since there is no visible text for assistive technologies.
CalendarPreview FunctionComponent<CalendarPreviewProps> Read-only calendar for visualizing a date range with optional highlighted dates.
Card FunctionComponent<CardProps> Content container with an optional overflow menu and a leading action slot.
Checkbox FunctionComponent<CheckboxProps> Form field wrapping a single <input type="checkbox" />.
CheckboxGroup FunctionComponent<CheckboxGroupProps> Form field grouping <input type="checkbox" /> elements for multi-option selection.
ComboBox FunctionComponent<ComboBoxProps> Form field wrapping a typeahead <input /> for single-option selection.
DatePicker FunctionComponent<DatePickerProps> Form field wrapping an <input type="date" /> with a calendar picker popover.
DateRangePicker FunctionComponent<DateRangePickerProps> Form field wrapping paired <input type="date" /> elements for a date range.
DescriptionList FunctionComponent<DescriptionListProps> HTML <dl> of term/description pairs in stacked or horizontal layout.
Dialog FunctionComponent<DialogProps> Modal confirmation dialog with a primary action and a cancel action.
FileInput FunctionComponent<FileInputProps> Form field wrapping an <input type="file" />.
Heading FunctionComponent<HeadingProps> HTML <h1>–<h6> with visual style controlled independently from semantic level.
Link FunctionComponent<LinkProps> HTML <a> for inline navigation.
LoadingSpinner FunctionComponent<LoadingSpinnerProps> Spinner shown while data or an action is pending.
Menu FunctionComponent<MenuProps> Popover menu of actions anchored to a trigger element.
Modal FunctionComponent<ModalProps> Overlay modal with customizable body content and footer.
MultiSelectComboBox FunctionComponent<MultiSelectComboBoxProps> Form field wrapping a typeahead <input /> for multi-option selection.
NumberInput FunctionComponent<NumberInputProps> Form field wrapping a numeric <input /> for currency, decimal, or percent values.
OrderedList FunctionComponent<OrderedListProps> HTML <ol> for a numbered list of items.
ProgressBar FunctionComponent<ProgressBarProps> Step-based progress indicator for multi-step flows.
Radio FunctionComponent<RadioProps> Form field wrapping a single <input type="radio" />.
RadioGroup FunctionComponent<RadioGroupProps> Form field grouping <input type="radio" /> elements for single-option selection.
Select FunctionComponent<SelectProps> Form field wrapping a single-select dropdown.
Switch FunctionComponent<SwitchProps> Form field wrapping an <input type="checkbox" /> styled as a toggle.
Table FunctionComponent<TableProps> Tabular data display with headers, rows, optional footer, and empty state.
Tabs FunctionComponent<TabsProps> Tabbed navigation with associated content panels.
Text FunctionComponent<TextProps> Body text element rendered as <p>, <span>, <div>, or <pre>.
TextArea FunctionComponent<TextAreaProps> Form field wrapping a <textarea>.
TextInput FunctionComponent<TextInputProps> Form field wrapping an <input />.
UnorderedList FunctionComponent<UnorderedListProps> HTML <ul> for an unordered list of items.
PaginationControl? FunctionComponent<PaginationControlProps> Pagination controls for list views. Defaults to the SDK's built-in pagination UI when omitted.
PayrollLoading? FunctionComponent<PayrollLoadingProps> Loading indicator for payroll calculation. Defaults to the SDK's built-in loading state when omitted.

SharedFieldLayoutProps

Common layout props shared by form controls — label, description, error message, required state, and visual label hiding.

Remarks

Extended by the props interfaces of UI primitive components (such as TextInputProps, SelectProps, and CheckboxGroupProps) so each control exposes a consistent surface for labeling, helper text, and validation messaging.

Extends

  • DataAttributes

Extended by

Properties

Property Type Description
label ReactNode Label text for the field
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
isRequired? boolean Indicates if the field is required
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers

SharedHorizontalFieldLayoutProps

Shared layout props consumed by horizontally-laid-out form controls — label, description, error message, required state, and visual label hiding.

Remarks

Extended by props interfaces for inline controls such as CheckboxProps, RadioProps, and SwitchProps. Alias of SharedFieldLayoutProps — exposed as a distinct name to mirror the horizontal layout used by these controls.

Extended by

Properties

Property Type Description
label ReactNode Label text for the field
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
isRequired? boolean Indicates if the field is required
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers

Component Props

AlertProps

Props your Alert implementation must accept from the component adapter. Renders a status message with an optional dismiss action; used for errors, warnings, success confirmations, and informational messages.

Properties

Property Type Default value Description
label string The label text for the alert
action? ReactNode Optional action node (e.g. a Button) rendered inline beside the label, before the dismiss button. Use this for compact alerts that need a single call-to-action next to the heading (e.g. a "Review" button summarising details available in a modal). Multi-line supporting copy should still pass through children.
children? ReactNode Optional children to be rendered inside the alert
className? string CSS className to be applied
disableScrollIntoView? boolean Whether to disable scrolling the alert into view and focusing it on mount. Set to true when using inside modals.
icon? ReactNode Optional custom icon component to override the default icon
onDismiss? () => void Optional callback function called when the dismiss button is clicked
status? "error" | "success" | "warning" | "info" 'info' The visual status that the alert should convey

BadgeProps

Props your Badge implementation must accept from the component adapter. Renders a small inline label for status, counts, or tags; optionally dismissible.

Extends

  • Pick<HTMLAttributes<HTMLSpanElement>, "className" | "id" | "aria-label">

Properties

Property Type Default value Description
children ReactNode Content to be displayed inside the badge
aria-label? string Defines a string value that labels the current element. See aria-labelledby.
dismissAriaLabel? string Accessible label for the dismiss button
isDisabled? boolean Whether the badge interaction is disabled
onDismiss? () => void Optional callback when the dismiss button is clicked. When provided, a dismiss button is rendered inside the badge.
status? "error" | "success" | "warning" | "info" 'info' Visual style variant of the badge

BannerProps

Props your Banner implementation must accept from the component adapter. Renders a full-width notification banner with a colored header and body content area; used for prominent warnings and errors.

Extends

  • Pick<HTMLAttributes<HTMLDivElement>, "className" | "id" | "aria-label">

Properties

Property Type Default value Description
children ReactNode Content to be displayed in the main content area
title ReactNode Title content displayed in the colored header section
aria-label? string Defines a string value that labels the current element. See aria-labelledby.
status? "error" | "warning" 'warning' Visual status variant of the banner

BoxHeaderProps

Props your BoxHeader implementation must accept from the component adapter. Renders the header section of a Box, combining a title, optional description, and an optional inline action slot.

Properties

Property Type Default value Description
title ReactNode Title content rendered as the heading.
action? ReactNode Optional action content (e.g. a Button) rendered inline opposite the title.
description? ReactNode Optional supporting description rendered below the title.
headingLevel? "h1" | "h2" | "h3" | "h4" | "h5" | "h6" 'h3' Semantic heading level for the title. Defaults to h3.

BoxProps

Props your Box implementation must accept from the component adapter. Renders a sectioned layout container with distinct header, body, and footer areas.

Properties

Property Type Description
children ReactNode Content rendered inside the box body.
className? string CSS className to be applied to the root element.
footer? ReactNode Optional content rendered below the body in the box footer section.
header? ReactNode Optional content rendered above the body in the box header section.
withPadding? boolean Whether the body should apply the default inner padding. Defaults to true; set to false for content that needs to be flush with the box edges.

BreadcrumbsProps

Props your Breadcrumbs implementation must accept from the component adapter. Renders a navigation breadcrumb trail showing the user's position in a multi-step flow.

Properties

Property Type Default value Description
breadcrumbs Breadcrumb[] Array of breadcrumbs
aria-label? string 'Breadcrumbs' Accessibility label for the breadcrumbs
className? string Additional CSS class name for the breadcrumbs container
currentBreadcrumbId? string Current breadcrumb id
isSmallContainer? boolean false Passed to the breadcrumbs when the container size is small (640px and below) At this size, the breadcrumb typically does not have sufficient size to render completely. In our implementation, we switch to a condensed mobile version of the breadcrumbs
onClick? (id) => void Event handler for breadcrumb navigation

ButtonIconProps

Props your ButtonIcon implementation must accept from the component adapter. Renders an icon-only <button>; requires aria-label since there is no visible text for assistive technologies.

Extends

Properties

Property Type Default value Description
aria-label string Required aria-label for icon buttons to ensure accessibility
aria-describedby? string Identifies the element (or elements) that describes the object. See aria-labelledby
aria-labelledby? string Identifies the element (or elements) that labels the current element. See aria-describedby.
buttonRef? Ref<HTMLButtonElement> React ref for the button element
children? ReactNode Content to be rendered inside the button
icon? ReactNode Optional leading icon rendered before children
isDisabled? boolean false Disables the button and prevents interaction
isLoading? boolean false Shows a loading spinner and disables the button
onBlur? (e) => void Handler for blur events
onFocus? (e) => void Handler for focus events
variant? "error" | "primary" | "secondary" | "tertiary" 'primary' Visual style variant of the button

ButtonProps

Props your Button implementation must accept from the component adapter. Renders an HTML button (<button>) with primary, secondary, tertiary, and error variants, a loading state, and an optional leading icon.

Extends

  • Pick<ButtonHTMLAttributes<HTMLButtonElement>, "name" | "id" | "className" | "type" | "onClick" | "onKeyDown" | "onKeyUp" | "aria-label" | "aria-labelledby" | "aria-describedby" | "form" | "title" | "tabIndex">

Extended by

Properties

Property Type Default value Description
aria-describedby? string Identifies the element (or elements) that describes the object. See aria-labelledby
aria-label? string Defines a string value that labels the current element. See aria-labelledby.
aria-labelledby? string Identifies the element (or elements) that labels the current element. See aria-describedby.
buttonRef? Ref<HTMLButtonElement> React ref for the button element
children? ReactNode Content to be rendered inside the button
icon? ReactNode Optional leading icon rendered before children
isDisabled? boolean false Disables the button and prevents interaction
isLoading? boolean false Shows a loading spinner and disables the button
onBlur? (e) => void Handler for blur events
onFocus? (e) => void Handler for focus events
variant? "error" | "primary" | "secondary" | "tertiary" 'primary' Visual style variant of the button

CalendarPreviewProps

Props your CalendarPreview implementation must accept from the component adapter. Renders a read-only calendar display for visualizing a date range with optional highlighted dates.

Properties

Property Type Description
dateRange object Date range to display in the calendar preview
dateRange.end Date End date of the range
dateRange.label string Label text for the date range
dateRange.start Date Start date of the range
highlightDates? object[] Array of dates to highlight with custom colors and labels

CardProps

Props your Card implementation must accept from the component adapter. Renders a content container with an optional overflow menu and a leading action slot.

Properties

Property Type Description
children ReactNode Content to be displayed inside the card
action? ReactNode Optional action element (e.g., checkbox, radio) to be displayed on the left side
className? string CSS className to be applied
menu? ReactNode Optional menu component to be displayed on the right side of the card

CheckboxGroupProps

Props your CheckboxGroup implementation must accept from the component adapter. Renders a form field wrapping multiple <input type="checkbox" /> elements with a label, optional description, and error message.

Extends

Properties

Property Type Default value Description
label ReactNode Label text for the field
options CheckboxGroupOption[] Array of checkbox options to display
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
inputRef? Ref<HTMLInputElement> React ref for the first checkbox input element
isDisabled? boolean false Disables all checkbox options in the group
isInvalid? boolean false Indicates if the checkbox group is in an invalid state
isRequired? boolean Indicates if the field is required
onChange? (value) => void Callback when selection changes
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers
value? string[] Array of currently selected values

CheckboxProps

Props your Checkbox implementation must accept from the component adapter. Renders a form field wrapping an <input type="checkbox" /> with a label, optional description, and error message.

Extends

Properties

Property Type Default value Description
label ReactNode Label text for the field
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
inputRef? Ref<HTMLInputElement> React ref for the checkbox input element
isDisabled? boolean false Disables the checkbox and prevents interaction
isInvalid? boolean false Indicates if the checkbox is in an invalid state
isRequired? boolean Indicates if the field is required
onBlur? () => void Handler for blur events
onChange? (value) => void Callback when checkbox state changes
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers
value? boolean Current checked state of the checkbox

ComboBoxProps

Props your ComboBox implementation must accept from the component adapter. Renders a form field wrapping a filterable <input /> for single-option selection, optionally allowing free-form values.

See

MultiSelectComboBoxProps

Extends

  • SharedFieldLayoutProps.Pick<InputHTMLAttributes<HTMLInputElement>, "className" | "id" | "name" | "placeholder">

Properties

Property Type Description
label string Label text for the combo box field
options ComboBoxOption[] Array of options to display in the dropdown
allowsCustomValue? boolean Allows the user to type any value, not just options in the list. The options list becomes a suggestion helper rather than a strict constraint.
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
inputRef? Ref<HTMLInputElement> React ref for the combo box input element
isDisabled? boolean Disables the combo box and prevents interaction
isInvalid? boolean Indicates that the field has an error
isRequired? boolean Indicates if the field is required
onBlur? () => void Handler for blur events
onChange? (value) => void Callback when selection changes
portalContainer? HTMLElement Element to use as the portal container for the dropdown popover. Overrides the default SDK root container from context.
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers
value? string | null Currently selected value

DatePickerProps

Props your DatePicker implementation must accept from the component adapter. Renders a form field wrapping an <input type="date" /> with a calendar picker popover, optional min/max bounds, and per-date disabling.

Extends

Properties

Property Type Description
label string Label text for the date picker field
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
inputRef? Ref<HTMLInputElement> React ref for the date input element
isDateDisabled? (date) => boolean Callback to determine if a specific date should be disabled. Return true to disable the date.
isDisabled? boolean Disables the date picker and prevents interaction
isInvalid? boolean Indicates that the field has an error
isRequired? boolean Indicates if the field is required
maxDate? Date Maximum selectable date. Dates after this will be disabled.
minDate? Date Minimum selectable date. Dates before this will be disabled.
onBlur? () => void Handler for blur events
onChange? (value) => void Callback when selected date changes
placeholder? string Placeholder text when no date is selected
portalContainer? HTMLElement Element to use as the portal container
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers
value? Date | null Currently selected date value

DateRangePickerProps

Props your DateRangePicker implementation must accept from the component adapter. Renders a form field wrapping paired <input type="date" /> elements for selecting an inclusive date range.

Properties

Property Type Description
endDateLabel string Accessible label for the end-date input.
label string Label text for the date range field.
onChange (range) => void Callback fired when the selected range changes. Receives null when the range is cleared.
startDateLabel string Accessible label for the start-date input.
value DateRange | null Currently selected date range, or null when nothing is selected.
maxValue? Date Latest selectable date. Dates after this are disabled.
minValue? Date Earliest selectable date. Dates before this are disabled.
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers.

DescriptionListProps

Props your DescriptionList implementation must accept from the component adapter. Renders an HTML <dl> of term/description pairs in either a stacked or horizontal layout.

Properties

Property Type Default value Description
items DescriptionListItem[] Term/description pairs to render in order.
className? string Additional class name applied to the root <dl>.
layout? "stacked" | "horizontal" 'stacked' Visual arrangement of each term/description pair. Defaults to 'stacked'.
showSeparators? boolean true Whether to render dividers between rows. Defaults to true.

DialogProps

Props your Dialog implementation must accept from the component adapter. Renders a modal confirmation dialog with a primary action and a cancel action.

Properties

Property Type Default value Description
closeActionLabel string Text label for the close/cancel action button
primaryActionLabel string Text label for the primary action button
children? ReactNode Optional children content to be rendered in the dialog body
isDestructive? boolean false Whether the primary action is destructive (changes button style to error variant)
isOpen? boolean false Controls whether the dialog is open or closed
isPrimaryActionLoading? boolean false Whether the primary action button is in loading state
onClose? () => void Callback function called when the dialog should be closed
onPrimaryActionClick? () => void Callback function called when the primary action button is clicked
shouldCloseOnBackdropClick? boolean false Whether clicking the backdrop should close the dialog
title? ReactNode Optional title content to be displayed at the top of the dialog

FileInputProps

Props your FileInput implementation must accept from the component adapter. Renders a form field wrapping an <input type="file" /> with a label, description, error message, and optional file type restrictions.

Extends

Properties

Property Type Default value Description
label ReactNode Label text for the field
onChange (file) => void Callback when file selection changes
value File | null undefined Currently selected file
accept? string[] Accepted file types (MIME types or extensions) Examples ['image/jpeg', 'image/png', 'application/pdf'] ['.jpg', '.png', '.pdf']
aria-describedby? string Aria-describedby attribute for accessibility
className? string Additional CSS class name
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
id? string ID for the file input element
isDisabled? boolean false Disables the input and prevents interaction
isInvalid? boolean false Indicates that the field has an error
isRequired? boolean Indicates if the field is required
onBlur? () => void Handler for blur events

HeadingProps

Props your Heading implementation must accept from the component adapter. Renders an HTML heading (<h1>–<h6>) whose visual style level is controlled independently from its semantic level.

Extends

  • Pick<HTMLAttributes<HTMLHeadingElement>, "className" | "id">

Properties

Property Type Description
as "h1" | "h2" | "h3" | "h4" | "h5" | "h6" The HTML heading element to render (h1-h6)
children? ReactNode Content to be displayed inside the heading
styledAs? "h1" | "h2" | "h3" | "h4" | "h5" | "h6" Optional visual style to apply, independent of the semantic heading level
textAlign? "center" | "start" | "end" Text alignment within the heading

LinkProps

Props your Link implementation must accept from the component adapter. Renders an HTML anchor (<a>) for inline navigation.

Extends

  • Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "target" | "rel" | "download" | "className" | "id" | "onKeyDown" | "onKeyUp" | "aria-label" | "aria-labelledby" | "aria-describedby" | "title">

Properties

Property Type Description
aria-describedby? string Identifies the element (or elements) that describes the object. See aria-labelledby
aria-label? string Defines a string value that labels the current element. See aria-labelledby.
aria-labelledby? string Identifies the element (or elements) that labels the current element. See aria-describedby.
children? ReactNode Content to be displayed inside the link

LoadingSpinnerProps

Props your LoadingSpinner implementation must accept from the component adapter. Renders a spinner indicating that content is loading.

Extends

  • Pick<HTMLAttributes<HTMLDivElement>, "className" | "id" | "aria-label">

Properties

Property Type Default value Description
aria-label? string Defines a string value that labels the current element. See aria-labelledby.
size? "sm" | "lg" 'lg' Size of the spinner
style? "inline" | "block" 'block' Display style of the spinner

MenuProps

Props your Menu implementation must accept from the component adapter. Renders a popover menu of actions anchored to a trigger element.

Extends

  • DataAttributes

Properties

Property Type Default value Description
aria-label string Accessible label describing the menu's purpose
isOpen? boolean false Controls whether the menu is currently open
items? MenuItem[] Array of menu items to display
onClose? () => void Callback when the menu is closed
placement? "top" | "top start" | "top end" | "bottom" | "bottom start" | "bottom end" | "left" | "right" 'bottom start' Controls the placement of the menu popover relative to the trigger
portalContainer? HTMLElement Element to use as the portal container for the menu popover. Overrides the default SDK root container from context.
triggerRef? RefObject<Element | null> undefined Reference to the element that triggers the menu

ModalProps

Props your Modal implementation must accept from the component adapter. Renders a modal overlay with body and footer content.

Properties

Property Type Default value Description
children? ReactNode Main content to be rendered in the modal body
containerRef? RefObject<HTMLDivElement | null> undefined Optional ref to the backdrop container
footer? ReactNode Footer content to be rendered at the bottom of the modal
isOpen? boolean false Controls whether the modal is open or closed
onClose? () => void Callback function called when the modal should be closed
shouldCloseOnBackdropClick? boolean false Whether clicking the backdrop should close the modal

MultiSelectComboBoxProps

Props your MultiSelectComboBox implementation must accept from the component adapter. Renders a form field wrapping a typeahead input for multi-option selection.

See

ComboBoxProps

Extends

  • SharedFieldLayoutProps.Pick<InputHTMLAttributes<HTMLInputElement>, "className" | "id" | "name" | "placeholder">

Properties

Property Type Description
label string Label text for the combo box field
options MultiSelectComboBoxOption[] Array of options to display in the dropdown
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
inputRef? Ref<HTMLInputElement> React ref for the combo box input element
isDisabled? boolean Disables the combo box and prevents interaction
isInvalid? boolean Indicates that the field has an error
isLoading? boolean Shows a loading message in the description slot while options are being fetched
isRequired? boolean Indicates if the field is required
onBlur? () => void Handler for blur events
onChange? (values) => void Callback when the set of selected values changes
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers
value? string[] Currently selected values

NumberInputProps

Props your NumberInput implementation must accept from the component adapter. Renders a form field wrapping a numeric <input /> for currency, decimal, or percent values, with optional start/end adornments.

Extends

  • SharedFieldLayoutProps.Pick<InputHTMLAttributes<HTMLInputElement>, "min" | "max" | "name" | "id" | "placeholder" | "className">

Properties

Property Type Description
label ReactNode Label text for the field
adornmentEnd? ReactNode Element to display at the end of the input
adornmentStart? ReactNode Element to display at the start of the input
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
format? "percent" | "currency" | "decimal" Format type for the number input
inputRef? Ref<HTMLInputElement> React ref for the number input element
isDisabled? boolean Disables the number input and prevents interaction
isInvalid? boolean Indicates that the field has an error
isRequired? boolean Indicates if the field is required
maximumFractionDigits? number Maximum number of decimal places to display
minimumFractionDigits? number Minimum number of decimal places to display
onBlur? () => void Handler for blur events
onChange? (value) => void Callback when number input value changes
onInputChange? (value) => void Fires on every keystroke with the raw input string (pre-commit), unlike onChange which fires on blur/Enter.
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers
value? number Current value of the number input

OrderedListProps

Props your OrderedList implementation must accept from the component adapter. Renders an ordered (numbered) list of items.

Extends

Properties

Property Type Description
items ReactNode[] The list items to render
aria-describedby? string ID of an element that describes this list
aria-label? string Accessibility label for the list
aria-labelledby? string ID of an element that labels this list
className? string Optional custom class name

PaginationControlProps

Props your PaginationControl implementation must accept from the component adapter. Renders pagination controls for navigating between pages of results.

Properties

Property Type Description
currentPage number The currently active page (1-based).
handleFirstPage () => void Navigate to the first page.
handleItemsPerPageChange (n) => void Called when the user changes the number of items displayed per page.
handleLastPage () => void Navigate to the last page.
handleNextPage () => void Navigate to the next page.
handlePreviousPage () => void Navigate to the previous page.
totalPages number Total number of pages.
isFetching? boolean Whether a page fetch is in progress.
itemsPerPage? PaginationItemsPerPage Number of items shown per page.
totalCount? number Total number of items across all pages.

PayrollLoadingProps

Props your PayrollLoading implementation must accept from the component adapter. Renders a loading state during payroll calculation.

Properties

Property Type Description
title ReactNode The heading text displayed above the loading animation.
description? ReactNode Optional supporting text displayed below the title.

ProgressBarProps

Props your ProgressBar implementation must accept from the component adapter. Renders a step-based progress indicator for multi-step flows.

Properties

Property Type Description
currentStep number Current step in the progress sequence
label string Accessible label describing the progress bar's purpose
totalSteps number Total number of steps in the progress sequence
className? string Additional CSS class name for the progress bar container
cta? ComponentType<{ }> | null Component to render as the progress bar's CTA

RadioGroupProps

Props your RadioGroup implementation must accept from the component adapter. Renders a form field wrapping multiple <input type="radio" /> elements with a label, optional description, and error message.

Extends

Properties

Property Type Default value Description
label ReactNode Label text for the field
options RadioGroupOption[] Array of radio options to display
defaultValue? string Initially selected value
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
inputRef? Ref<HTMLInputElement> React ref for the first radio input element
isDisabled? boolean false Disables all radio options in the group
isInvalid? boolean false Indicates that the field has an error
isRequired? boolean Indicates if the field is required
onChange? (value) => void Callback when selection changes
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers
value? string | null undefined Currently selected value

RadioProps

Props your Radio implementation must accept from the component adapter. Renders a form field wrapping an <input type="radio" /> with a label, optional description, and error message.

Extends

Properties

Property Type Default value Description
label ReactNode Label text for the field
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
inputRef? Ref<HTMLInputElement> React ref for the radio input element
isDisabled? boolean false Disables the radio button and prevents interaction
isInvalid? boolean false Indicates that the field has an error
isRequired? boolean Indicates if the field is required
onChange? (checked) => void Callback when radio button state changes
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers
value? boolean Current checked state of the radio button

SelectProps

Props your Select implementation must accept from the component adapter. Renders a form field wrapping a single-select dropdown with a label, description, and error message.

Extends

Properties

Property Type Description
label string Label text for the select field
options SelectOption[] Array of options to display in the select dropdown
placeholder string Placeholder text displayed when no option is selected. Required so empty dropdowns always communicate the action — pass an empty string only when a default value is guaranteed.
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
inputRef? Ref<HTMLButtonElement> React ref for the select button element
isDisabled? boolean Disables the select and prevents interaction
isInvalid? boolean Indicates that the field has an error
isRequired? boolean Indicates if the field is required
onBlur? () => void Handler for blur events
onChange? (value) => void Callback when selection changes
portalContainer? HTMLElement Element to use as the portal container
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers
value? string | null Currently selected value

SwitchProps

Props your Switch implementation must accept from the component adapter. Renders a form field wrapping an <input type="checkbox" /> styled as a boolean on/off toggle.

Extends

Properties

Property Type Default value Description
label string Label text for the switch
aria-controls? string Identifies the element (or elements) whose contents or presence are controlled by the current element. See aria-owns.
className? string Additional CSS class name for the switch container
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
inputRef? Ref<HTMLInputElement> React ref for the switch input element
isDisabled? boolean false Disables the switch and prevents interaction
isInvalid? boolean false Indicates that the field has an error
isRequired? boolean Indicates if the field is required
onBlur? () => void Handler for blur events
onChange? (checked) => void Callback when switch state changes
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers
value? boolean Current checked state of the switch

TableProps

Props your Table implementation must accept from the component adapter. Renders a table with column headers, body rows, an optional footer row, and an optional empty state.

Extends

  • Pick<TableHTMLAttributes<HTMLTableElement>, "className" | "aria-label" | "id" | "role" | "aria-labelledby" | "aria-describedby">

Properties

Property Type Default value Description
headers TableData[] Array of header cells for the table
rows TableRow[] Array of rows to be displayed in the table
aria-describedby? string Identifies the element (or elements) that describes the object. See aria-labelledby
aria-label? string Defines a string value that labels the current element. See aria-labelledby.
aria-labelledby? string Identifies the element (or elements) that labels the current element. See aria-describedby.
emptyState? ReactNode Content to display when the table has no rows
footer? TableData[] Array of footer cells for the table
hasCheckboxColumn? boolean false Whether the first column contains checkboxes (affects which column gets leading variant)
isWithinBox? boolean false Removes borders and background for use inside a Box component

TabsProps

Props your Tabs implementation must accept from the component adapter. Renders tabbed navigation with associated content panels.

Properties

Property Type Description
onSelectionChange (id) => void Callback when tab selection changes
tabs TabProps[] Array of tab configuration objects
aria-label? string Accessible label for the tabs
aria-labelledby? string ID of element that labels the tabs
className? string Additional CSS class name
selectedId? string Currently selected tab id

TextAreaProps

Props your TextArea implementation must accept from the component adapter. Renders a form field wrapping a <textarea> with a label, description, and error message.

Extends

  • SharedFieldLayoutProps.Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, "name" | "id" | "placeholder" | "className" | "cols">.Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-describedby">

Properties

Property Type Default value Description
label ReactNode Label text for the field
aria-describedby? string Identifies the element (or elements) that describes the object. See aria-labelledby
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
inputRef? Ref<HTMLTextAreaElement> React ref for the textarea element
isDisabled? boolean false Disables the textarea and prevents interaction
isInvalid? boolean false Indicates that the field has an error
isRequired? boolean Indicates if the field is required
onBlur? () => void Handler for blur events
onChange? (value) => void Callback when textarea value changes
rows? number 4 Number of visible text rows
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers
value? string Current value of the textarea

TextInputProps

Props your TextInput implementation must accept from the component adapter. Renders a form field wrapping an <input /> with a label, description, error message, and start/end adornment slots.

Extends

  • SharedFieldLayoutProps.Pick<InputHTMLAttributes<HTMLInputElement>, "name" | "id" | "placeholder" | "className" | "type" | "min" | "max" | "maxLength">.Pick<InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "aria-labelledby">

Properties

Property Type Default value Description
label ReactNode Label text for the field
adornmentEnd? ReactNode Element to display at the end of the input
adornmentStart? ReactNode Element to display at the start of the input
aria-describedby? string Identifies the element (or elements) that describes the object. See aria-labelledby
aria-labelledby? string Identifies the element (or elements) that labels the current element. See aria-describedby.
description? ReactNode Optional description text for the field
errorMessage? string Error message to display when the field is invalid
inputRef? Ref<HTMLInputElement> React ref for the input element
isDisabled? boolean false Disables the input and prevents interaction
isInvalid? boolean false Indicates that the field has an error
isRequired? boolean Indicates if the field is required
onBlur? () => void Handler for blur events
onChange? (value) => void Callback when input value changes
shouldVisuallyHideLabel? boolean Hides the label visually while keeping it accessible to screen readers
value? string Current value of the input

TextProps

Props your Text implementation must accept from the component adapter. Renders body text as <p>, <span>, <div>, or <pre>, with size, weight, alignment, and variant options.

Extends

  • Pick<HTMLAttributes<HTMLParagraphElement>, "className" | "id">

Properties

Property Type Default value Description
as? "div" | "span" | "p" | "pre" 'p' HTML element to render the text as
children? ReactNode Content to be displayed
size? "xs" | "sm" | "md" | "lg" 'md' Size variant of the text
textAlign? "center" | "start" | "end" undefined Text alignment within the container
variant? "supporting" | "leading" undefined Visual style variant of the text
weight? "bold" | "medium" | "regular" | "semibold" undefined Font weight of the text

UnorderedListProps

Props your UnorderedList implementation must accept from the component adapter. Renders an unordered (bulleted) list of items.

Extends

Properties

Property Type Description
items ReactNode[] The list items to render
aria-describedby? string ID of an element that describes this list
aria-label? string Accessibility label for the list
aria-labelledby? string ID of an element that labels this list
className? string Optional custom class name

Utility Types

BaseListProps

Shared props accepted by both OrderedList and UnorderedList implementations.

Extended by

Properties

Property Type Description
items ReactNode[] The list items to render
aria-describedby? string ID of an element that describes this list
aria-label? string Accessibility label for the list
aria-labelledby? string ID of an element that labels this list
className? string Optional custom class name

Breadcrumb

Single entry in a Breadcrumbs trail.

Properties

Property Type Description
id string Unique identifier for the breadcrumb. Matches against currentBreadcrumbId and is passed to onClick.
label ReactNode Display content rendered for the breadcrumb.
isClickable? boolean When false, the breadcrumb is rendered as plain text even if onClick is provided. Defaults to true.

CheckboxGroupOption

Option entry rendered as a single checkbox within a CheckboxGroup.

Properties

Property Type Description
label ReactNode Label text or content for the checkbox option
value string Value of the option that will be passed to onChange
description? ReactNode Optional description text for the checkbox option
isDisabled? boolean Disables this specific checkbox option

ComboBoxOption

Option entry for the ComboBox dropdown list.

Properties

Property Type Description
label string Display text for the option
value string Value of the option that will be passed to onChange

DateRange

Inclusive start/end pair representing a selected date range.

Properties

Property Type Description
end Date Last date in the range, inclusive.
start Date First date in the range, inclusive.

DescriptionListItem

Single term/description pair rendered as a row within a DescriptionList.

Properties

Property Type Description
description ReactNode | ReactNode[] Description content (the <dd>). Pass an array to render multiple <dd> elements for the same term.
term ReactNode | ReactNode[] Term content (the <dt>). Pass an array to render multiple <dt> elements for the same description.

MenuItem

Action entry your Menu implementation must accept for each entry in its items array from the component adapter.

Extends

  • DataAttributes

Properties

Property Type Description
label string Text label for the menu item
onClick () => void Callback function when the menu item is clicked
href? string Optional URL to navigate to when clicked
icon? ReactNode Optional icon to display before the label
isDisabled? boolean Disables the menu item and prevents interaction

MultiSelectComboBoxOption

Option entry for a MultiSelectComboBox dropdown list.

Properties

Property Type Description
label string Display text for the option
value string Value of the option that will be passed to onChange

PaginationItemsPerPage

PaginationItemsPerPage = 5 | 10 | 25 | 50

RadioGroupOption

Option entry your RadioGroup implementation receives in the options array when rendering each radio button.

Properties

Property Type Description
label ReactNode Label text or content for the radio option
value string Value of the option that will be passed to onChange
description? ReactNode Optional description text for the radio option
isDisabled? boolean Disables this specific radio option

SelectOption

Option entry your Select implementation receives in the options array when rendering each item in the dropdown.

Properties

Property Type Description
label string Display text for the option
value string Value of the option that will be passed to onChange

TableData

Shape of a single cell your Table implementation receives for headers, rows, and footers.

Properties

Property Type Description
content ReactNode Content to be displayed in the table cell
key string Unique identifier for the table cell

TableRow

Shape of a single row your Table implementation receives, containing an ordered list of cells.

Properties

Property Type Description
data TableData[] Array of cells to be displayed in the row
key string Unique identifier for the table row

TabProps

Shape of a single tab configuration your Tabs implementation receives in its tabs prop.

Properties

Property Type Description
content ReactNode Content to display in the tab panel
id string Unique identifier for the tab
label ReactNode Label to display in the tab button
isDisabled? boolean Whether the tab is disabled