UI component inventory

Design system components for advanced customization of all SDK UI. See the component adapter guide for more context.

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" />.
FormBox	FunctionComponent<FormBoxProps>	Bordered container for grouping related form fields, with an optional header slot.
FormBoxHeader	FunctionComponent<FormBoxHeaderProps>	Header section of a FormBox with a title, optional description, and optional inline action.
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.

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.
className?	string		-
dismissAriaLabel?	string		Accessible label for the dismiss button
id?	string		-
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.
className?	string		-
id?	string		-
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: string) => void		Event handler for breadcrumb navigation

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.

---

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

• ButtonProps

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
className?	string		-
form?	string		-
icon?	ReactNode		Optional leading icon rendered before children
id?	string		-
isDisabled?	boolean	false	Disables the button and prevents interaction
isLoading?	boolean	false	Shows a loading spinner and disables the button
name?	string		-
onBlur?	(e: FocusEvent) => void		Handler for blur events
onClick?	MouseEventHandler<HTMLButtonElement>		-
onFocus?	(e: FocusEvent) => void		Handler for focus events
onKeyDown?	KeyboardEventHandler<HTMLButtonElement>		-
onKeyUp?	KeyboardEventHandler<HTMLButtonElement>		-
tabIndex?	number		-
title?	string		-
type?	"submit" | "reset" | "button"	undefined	-
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

• ButtonIconProps

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
className?	string		-
form?	string		-
icon?	ReactNode		Optional leading icon rendered before children
id?	string		-
isDisabled?	boolean	false	Disables the button and prevents interaction
isLoading?	boolean	false	Shows a loading spinner and disables the button
name?	string		-
onBlur?	(e: FocusEvent) => void		Handler for blur events
onClick?	MouseEventHandler<HTMLButtonElement>		-
onFocus?	(e: FocusEvent) => void		Handler for focus events
onKeyDown?	KeyboardEventHandler<HTMLButtonElement>		-
onKeyUp?	KeyboardEventHandler<HTMLButtonElement>		-
tabIndex?	number		-
title?	string		-
type?	"submit" | "reset" | "button"	undefined	-
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

• SharedFieldLayoutProps.Pick<FieldsetHTMLAttributes<HTMLFieldSetElement>, "className">

Indexable

[key: `data-${string}`]: string | number | boolean

Properties

Property	Type	Default value	Description
label	ReactNode		Label text for the field
options	CheckboxGroupOption[]		Array of checkbox options to display
className?	string		-
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: string[]) => 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

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

---

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

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

Indexable

[key: `data-${string}`]: string | number | boolean

Properties

Property	Type	Default value	Description
label	ReactNode		Label text for the field
className?	string		-
description?	ReactNode		Optional description text for the field
errorMessage?	string		Error message to display when the field is invalid
id?	string		-
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
name?	string		-
onBlur?	() => void		Handler for blur events
onChange?	(value: boolean) => 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">

Indexable

[key: `data-${string}`]: string | number | boolean

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.
className?	string	-
description?	ReactNode	Optional description text for the field
errorMessage?	string	Error message to display when the field is invalid
id?	string	-
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
name?	string	-
onBlur?	() => void	Handler for blur events
onChange?	(value: string) => void	Callback when selection changes
placeholder?	string	-
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

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

---

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

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

Indexable

[key: `data-${string}`]: string | number | boolean

Properties

Property	Type	Description
label	string	Label text for the date picker field
className?	string	-
description?	ReactNode	Optional description text for the field
errorMessage?	string	Error message to display when the field is invalid
id?	string	-
inputRef?	Ref<HTMLInputElement>	React ref for the date input element
isDateDisabled?	(date: 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.
name?	string	-
onBlur?	() => void	Handler for blur events
onChange?	(value: Date | null) => 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: DateRange | null) => 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.

DateRange

Inclusive start/end pair representing a date range selected in a DateRangePicker.

Properties

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

---

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.

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.

---

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

• Omit<SharedFieldLayoutProps, "shouldVisuallyHideLabel">

Indexable

[key: `data-${string}`]: string | number | boolean

Properties

Property	Type	Default value	Description
label	ReactNode		Label text for the field
onChange	(file: File | null) => void	undefined	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

---

FormBoxHeaderProps

Props your FormBoxHeader implementation must accept from the component adapter. Renders the header section of a FormBox, 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.

---

FormBoxProps

Props your FormBox implementation must accept from the component adapter. Renders a sectioned container used to group related form fields, with optional header and footer slots.

Properties

Property	Type	Description
children	ReactNode	Content rendered inside the form box body.
className?	string	CSS className to be applied to the root element.
footer?	ReactNode	Optional content rendered below the body in the form box footer section.
header?	ReactNode	Optional content rendered above the body in the form 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 form box edges.

---

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
className?	string	-
id?	string	-
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

---

InputProps

Base text-input primitive used internally by TextInput and NumberInput.

Remarks

Higher-level field components like TextInput and NumberInput reuse the adornmentStart and adornmentEnd slots from this interface.

Extends

• Pick<InputHTMLAttributes<HTMLInputElement>, "className" | "id" | "name" | "placeholder" | "type" | "value" | "onChange" | "onBlur" | "onFocus" | "aria-describedby" | "aria-labelledby" | "aria-invalid" | "min" | "max" | "maxLength">

Properties

Property	Type	Default value	Description
adornmentEnd?	ReactNode		Content to display at the end of the input
adornmentStart?	ReactNode		Content to display at the start of the input
aria-describedby?	string		Identifies the element (or elements) that describes the object. See aria-labelledby
aria-invalid?	boolean | "true" | "false" | "grammar" | "spelling"	undefined	Indicates the entered value does not conform to the format expected by the application. See aria-errormessage.
aria-labelledby?	string		Identifies the element (or elements) that labels the current element. See aria-describedby.
className?	string		-
id?	string		-
inputRef?	Ref<HTMLInputElement>		Ref for the input element
isDisabled?	boolean	false	Whether the input is disabled
max?	string | number	undefined	-
maxLength?	number		-
min?	string | number	undefined	-
name?	string		-
onBlur?	FocusEventHandler<HTMLInputElement>		-
onChange?	ChangeEventHandler<HTMLInputElement, HTMLInputElement>		-
onFocus?	FocusEventHandler<HTMLInputElement>		-
placeholder?	string		-
type?	HTMLInputTypeAttribute		-
value?	string | number | readonly string[]	undefined	-

---

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
className?	string	-
download?	any	-
href?	string	-
id?	string	-
onKeyDown?	KeyboardEventHandler<HTMLAnchorElement>	-
onKeyUp?	KeyboardEventHandler<HTMLAnchorElement>	-
rel?	string	-
target?	HTMLAttributeAnchorTarget	-
title?	string	-

---

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.
className?	string		-
id?	string		-
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

Indexable

[key: `data-${string}`]: string | number | boolean

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

MenuItem

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

Extends

• DataAttributes

Indexable

[key: `data-${string}`]: string | number | boolean

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

---

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">

Indexable

[key: `data-${string}`]: string | number | boolean

Properties

Property	Type	Description
label	string	Label text for the combo box field
options	MultiSelectComboBoxOption[]	Array of options to display in the dropdown
className?	string	-
description?	ReactNode	Optional description text for the field
errorMessage?	string	Error message to display when the field is invalid
id?	string	-
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
name?	string	-
onBlur?	() => void	Handler for blur events
onChange?	(values: string[]) => void	Callback when the set of selected values changes
placeholder?	string	-
shouldVisuallyHideLabel?	boolean	Hides the label visually while keeping it accessible to screen readers
value?	string[]	Currently selected values

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

---

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">

Indexable

[key: `data-${string}`]: string | number | boolean

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
className?	string	-
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
id?	string	-
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
max?	string | number	-
maximumFractionDigits?	number	Maximum number of decimal places to display
min?	string | number	-
minimumFractionDigits?	number	Minimum number of decimal places to display
name?	string	-
onBlur?	() => void	Handler for blur events
onChange?	(value: number) => void	Callback when number input value changes
onInputChange?	(value: string) => void	Fires on every keystroke with the raw input string (pre-commit), unlike onChange which fires on blur/Enter.
placeholder?	string	-
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

• BaseListProps

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: PaginationItemsPerPage) => 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.

PaginationItemsPerPage

PaginationItemsPerPage = 5 | 10 | 25 | 50

Allowed page-size values a PaginationControl offers for how many items to show per page.

---

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

• SharedFieldLayoutProps.Pick<FieldsetHTMLAttributes<HTMLFieldSetElement>, "className">

Indexable

[key: `data-${string}`]: string | number | boolean

Properties

Property	Type	Default value	Description
label	ReactNode		Label text for the field
options	RadioGroupOption[]		Array of radio options to display
className?	string		-
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: string) => 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

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

---

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

• SharedHorizontalFieldLayoutProps.Pick<InputHTMLAttributes<HTMLInputElement>, "name" | "id" | "className" | "onBlur">

Indexable

[key: `data-${string}`]: string | number | boolean

Properties

Property	Type	Default value	Description
label	ReactNode		Label text for the field
className?	string		-
description?	ReactNode		Optional description text for the field
errorMessage?	string		Error message to display when the field is invalid
id?	string		-
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
name?	string		-
onBlur?	FocusEventHandler<HTMLInputElement>		-
onChange?	(checked: boolean) => 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

• SharedFieldLayoutProps.Pick<SelectHTMLAttributes<HTMLSelectElement>, "id" | "name" | "className">

Indexable

[key: `data-${string}`]: string | number | boolean

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.
className?	string	-
description?	ReactNode	Optional description text for the field
errorMessage?	string	Error message to display when the field is invalid
id?	string	-
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
name?	string	-
onBlur?	() => void	Handler for blur events
onChange?	(value: string) => 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

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

---

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

• SharedHorizontalFieldLayoutProps.Pick<InputHTMLAttributes<HTMLInputElement>, "name" | "id">.Pick<AriaAttributes, "aria-controls">

Indexable

[key: `data-${string}`]: string | number | boolean

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
id?	string		-
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
name?	string		-
onBlur?	() => void		Handler for blur events
onChange?	(checked: boolean) => 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.
className?	string		-
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)
id?	string		-
isWithinBox?	boolean	false	Removes borders and background for use inside a Box component
role?	AriaRole		-

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

---

TabsProps

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

Properties

Property	Type	Description
onSelectionChange	(id: string) => 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

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

---

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">

Indexable

[key: `data-${string}`]: string | number | boolean

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
className?	string		-
cols?	number		-
description?	ReactNode		Optional description text for the field
errorMessage?	string		Error message to display when the field is invalid
id?	string		-
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
name?	string		-
onBlur?	() => void		Handler for blur events
onChange?	(value: string) => void		Callback when textarea value changes
placeholder?	string		-
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">

Indexable

[key: `data-${string}`]: string | number | boolean

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.
className?	string		-
description?	ReactNode		Optional description text for the field
errorMessage?	string		Error message to display when the field is invalid
id?	string		-
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
max?	string | number	undefined	-
maxLength?	number		-
min?	string | number	undefined	-
name?	string		-
onBlur?	() => void		Handler for blur events
onChange?	(value: string) => void		Callback when input value changes
placeholder?	string		-
shouldVisuallyHideLabel?	boolean		Hides the label visually while keeping it accessible to screen readers
type?	HTMLInputTypeAttribute		-
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" | "p" | "span" | "pre"	'p'	HTML element to render the text as
children?	ReactNode		Content to be displayed
className?	string		-
id?	string		-
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

• BaseListProps

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

• OrderedListProps
• UnorderedListProps

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

---

DataAttributes

DataAttributes = object

An open map of data-* attributes that can be spread onto a rendered DOM element.

Index Signature

[key: `data-${string}`]: string | number | boolean

---

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

• TextInputProps
• SelectProps
• NumberInputProps
• DatePickerProps
• RadioGroupProps
• CheckboxGroupProps
• ComboBoxProps
• MultiSelectComboBoxProps
• TextAreaProps

Indexable

[key: `data-${string}`]: string | number | boolean

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

• CheckboxProps
• SwitchProps
• RadioProps

Indexable

[key: `data-${string}`]: string | number | boolean

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