Component Index

165 components exported from carbon-components-svelte@0.90.0.

Components

Accordion
AccordionItem
AccordionSkeleton
AspectRatio
Breadcrumb
BreadcrumbItem
BreadcrumbSkeleton
Breakpoint
Button
ButtonSet
ButtonSkeleton
Checkbox
CheckboxSkeleton
ClickableTile
CodeSnippet
CodeSnippetSkeleton
Column
ComboBox
ComposedModal
Content
ContentSwitcher
ContextMenu
ContextMenuDivider
ContextMenuGroup
ContextMenuOption
ContextMenuRadioGroup
CopyButton
DataTable
DataTableSkeleton
DatePicker
DatePickerInput
DatePickerSkeleton
Dropdown
DropdownSkeleton
ExpandableTile
FileUploader
FileUploaderButton
FileUploaderDropContainer
FileUploaderItem
FileUploaderSkeleton
Filename
FluidForm
Form
FormGroup
FormItem
FormLabel
Grid
Header
HeaderAction
HeaderActionLink
HeaderGlobalAction
HeaderNav
HeaderNavItem
HeaderNavMenu
HeaderPanelDivider
HeaderPanelLink
HeaderPanelLinks
HeaderSearch
HeaderUtilities
ImageLoader
InlineLoading
InlineNotification
Link
ListBox
ListBoxField
ListBoxMenu
ListBoxMenuIcon
ListBoxMenuItem
ListBoxSelection
ListItem
Loading
LocalStorage
Modal
ModalBody
ModalFooter
ModalHeader
MultiSelect
NotificationActionButton
NotificationButton
NotificationIcon
NumberInput
NumberInputSkeleton
OrderedList
OutboundLink
OverflowMenu
OverflowMenuItem
Pagination
PaginationNav
PaginationSkeleton
PasswordInput
Popover
ProgressBar
ProgressIndicator
ProgressIndicatorSkeleton
ProgressStep
RadioButton
RadioButtonGroup
RadioButtonSkeleton
RadioTile
RecursiveList
Row
Search
SearchSkeleton
Select
SelectItem
SelectItemGroup
SelectSkeleton
SelectableTile
SideNav
SideNavDivider
SideNavItems
SideNavLink
SideNavMenu
SideNavMenuItem
SkeletonPlaceholder
SkeletonText
SkipToContent
Slider
SliderSkeleton
StructuredList
StructuredListBody
StructuredListCell
StructuredListHead
StructuredListInput
StructuredListRow
StructuredListSkeleton
Switch
Tab
TabContent
Table
TableBody
TableCell
TableContainer
TableHead
TableHeader
TableRow
Tabs
TabsSkeleton
Tag
TagSkeleton
TextArea
TextAreaSkeleton
TextInput
TextInputSkeleton
Theme
Tile
TileGroup
TimePicker
TimePickerSelect
ToastNotification
Toggle
ToggleSkeleton
Toolbar
ToolbarBatchActions
ToolbarContent
ToolbarMenu
ToolbarMenuItem
ToolbarSearch
Tooltip
TooltipDefinition
TooltipFooter
TooltipIcon
TreeView
Truncate
UnorderedList

`Accordion`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
align	No	`let`	No	`"start" \| "end"`	`"end"`	Specify alignment of accordion item chevron icon
size	No	`let`	No	`"sm" \| "xl"`	`undefined`	Specify the size of the accordion
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the accordion
skeleton	No	`let`	No	`boolean`	`false`	Set to `true` to display the skeleton state

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`AccordionItem`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
disabled	No	`let`	Yes	`boolean`	`false`	Set to `true` to disable the accordion item
open	No	`let`	Yes	`boolean`	`false`	Set to `true` to open the first accordion item
title	No	`let`	No	`string`	`"title"`	Specify the title of the accordion item heading. Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`)
iconDescription	No	`let`	No	`string`	`"Expand/Collapse"`	Specify the ARIA label for the accordion item chevron icon

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
title	No	--	`{title}`

Events

Event name	Type	Detail
animationend	forwarded	--
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--

`AccordionSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
count	No	`let`	No	`number`	`4`	Specify the number of accordion items to render
align	No	`let`	No	`"start" \| "end"`	`"end"`	Specify alignment of accordion item chevron icon
size	No	`let`	No	`"sm" \| "xl"`	`undefined`	Specify the size of the accordion
open	No	`let`	No	`boolean`	`true`	Set to `false` to close the first accordion item

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`AspectRatio`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ratio	No	`let`	No	`"2x1" \| "2x3" \| "16x9" \| "4x3" \| "1x1" \| "3x4" \| "3x2" \| "9x16" \| "1x2"`	`"2x1"`	Specify the aspect ratio

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`Breadcrumb`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
noTrailingSlash	No	`let`	No	`boolean`	`false`	Set to `true` to hide the breadcrumb trailing slash
skeleton	No	`let`	No	`boolean`	`false`	Set to `true` to display skeleton state

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`BreadcrumbItem`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
href	No	`let`	No	`string`	`undefined`	Set the `href` to use an anchor link
isCurrentPage	No	`let`	No	`boolean`	`false`	Set to `true` if the breadcrumb item represents the current page

Slots

Slot name	Default	Props	Fallback
--	Yes	`{props?: { ["aria-current"]?: string; class: "bx--link"; }}`	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`BreadcrumbSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
noTrailingSlash	No	`let`	No	`boolean`	`false`	Set to `true` to hide the breadcrumb trailing slash
count	No	`let`	No	`number`	`3`	Specify the number of breadcrumb items to render

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Breakpoint`

Types

export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";

export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
sizes	No	`let`	Yes	`Record<BreakpointSize, boolean>`	`{ sm: false, md: false, lg: false, xlg: false, max: false, }`	Carbon grid sizes as an object
size	No	`let`	Yes	`BreakpointSize`	`undefined`	Determine the current Carbon grid breakpoint size

Slots

Slot name	Default	Props	Fallback
--	Yes	`{ size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; }`	--

Events

Event name	Type	Detail
change	dispatched	`{ size: BreakpointSize; breakpointValue: BreakpointValue; }`

`Button`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLAnchorElement \| HTMLButtonElement`	`null`	Obtain a reference to the HTML element
kind	No	`let`	No	`"primary" \| "secondary" \| "tertiary" \| "ghost" \| "danger" \| "danger-tertiary" \| "danger-ghost"`	`"primary"`	Specify the kind of button
size	No	`let`	No	`"default" \| "field" \| "small" \| "lg" \| "xl"`	`"default"`	Specify the size of button
expressive	No	`let`	No	`boolean`	`false`	Set to `true` to use Carbon's expressive typesetting
isSelected	No	`let`	No	`boolean`	`false`	Set to `true` to enable the selected state for an icon-only, ghost button
icon	No	`let`	No	`any`	`undefined`	Specify the icon to render Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`)
iconDescription	No	`let`	No	`string`	`undefined`	Specify the ARIA label for the button icon
tooltipAlignment	No	`let`	No	`"start" \| "center" \| "end"`	`"center"`	Set the alignment of the tooltip relative to the icon. Only applies to icon-only buttons
tooltipPosition	No	`let`	No	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Set the position of the tooltip relative to the icon
hideTooltip	No	`let`	No	`boolean`	`false`	Set to `true` to hide the tooltip while maintaining accessibility. Only applies to icon-only buttons. When `true`, the tooltip is visually hidden but the `iconDescription` remains accessible to screen readers.
as	No	`let`	No	`boolean`	`false`	Set to `true` to render a custom HTML element Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)
skeleton	No	`let`	No	`boolean`	`false`	Set to `true` to display the skeleton state
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the button
href	No	`let`	No	`string`	`undefined`	Set the `href` to use an anchor link
tabindex	No	`let`	No	`string`	`"0"`	Specify the tabindex
type	No	`let`	No	`string`	`"button"`	Specify the `type` attribute for the button element

Slots

Slot name	Default	Props	Fallback
--	Yes	`{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }`	--
icon	No	--	--

Events

Event name	Type	Detail
click	forwarded	--
focus	forwarded	--
blur	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`ButtonSet`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
stacked	No	`let`	No	`boolean`	`false`	Set to `true` to stack the buttons vertically

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`ButtonSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
href	No	`let`	No	`string`	`undefined`	Set the `href` to use an anchor link
size	No	`let`	No	`"default" \| "field" \| "small" \| "lg" \| "xl"`	`"default"`	Specify the size of button skeleton

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
focus	forwarded	--
blur	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Checkbox`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
title	No	`let`	Yes	`string`	`undefined`	Specify the title attribute for the label element
indeterminate	No	`let`	Yes	`boolean`	`false`	Specify whether the checkbox is indeterminate
group	No	`let`	Yes	`ReadonlyArray`	`undefined`	Specify the bound group
checked	No	`let`	Yes	`boolean`	`false`	Specify whether the checkbox is checked
value	No	`let`	No	`any`	`""`	Specify the value of the checkbox
skeleton	No	`let`	No	`boolean`	`false`	Set to `true` to display the skeleton state
required	No	`let`	No	`boolean`	`false`	Set to `true` to mark the field as required
readonly	No	`let`	No	`boolean`	`false`	Set to `true` for the checkbox to be read-only
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the checkbox
labelText	No	`let`	No	`string`	`""`	Specify the label text
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
helperText	No	`let`	No	`string`	`""`	Specify the helper text
name	No	`let`	No	`string`	`""`	Set a name for the input element
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input label

Slots

Slot name	Default	Props	Fallback
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
check	dispatched	`boolean`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
focus	forwarded	--
blur	forwarded	--

`CheckboxSkeleton`

Props

None.

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`ClickableTile`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
clicked	No	`let`	Yes	`boolean`	`false`	Set to `true` to click the tile
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the tile
href	No	`let`	No	`string`	`undefined`	Set the `href`

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
keydown	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`CodeSnippet`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLPreElement`	`null`	Obtain a reference to the pre HTML element
showMoreLess	No	`let`	Yes	`boolean`	`true`	Set to `false` to hide the show more/less button NOTE: this prop only works with the `type="multi"` variant
expanded	No	`let`	Yes	`boolean`	`false`	Set to `true` to expand a multi-line code snippet (type="multi")
type	No	`let`	No	`"single" \| "inline" \| "multi"`	`"single"`	Set the type of code snippet
code	No	`let`	No	`string`	`undefined`	Set the code snippet text. Alternatively, use the default slot (e.g., `<CodeSnippet>{code}</CodeSnippet>`). NOTE: you must use the `code` prop for the copy-to-clipboard functionality.
copy	No	`let`	No	`(code: string) => void`	`async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }`	By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard. Provide a custom function to override this behavior.
hideCopyButton	No	`let`	No	`boolean`	`false`	Set to `true` to hide the copy button
disabled	No	`let`	No	`boolean`	`false`	Set to `true` for the disabled variant. Only applies to the "single", "multi" types
wrapText	No	`let`	No	`boolean`	`false`	Set to `true` to wrap the text. NOTE: this prop only works with the `type="multi"` variant
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
skeleton	No	`let`	No	`boolean`	`false`	Set to `true` to display the skeleton state
copyButtonDescription	No	`let`	No	`string`	`undefined`	Specify the ARIA label for the copy button icon
copyLabel	No	`let`	No	`string`	`undefined`	Specify the ARIA label of the copy button
feedback	No	`let`	No	`string`	`"Copied!"`	Specify the feedback text displayed when clicking the snippet
feedbackTimeout	No	`let`	No	`number`	`2000`	Set the timeout duration (ms) to display feedback text
showLessText	No	`let`	No	`string`	`"Show less"`	Specify the show less text. NOTE: this prop only works with the `type="multi"` variant
showMoreText	No	`let`	No	`string`	`"Show more"`	Specify the show more text NOTE: this prop only works with the `type="multi"` variant
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the code element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	`{code}`

Events

Event name	Type	Detail
expand	dispatched	`null`
collapse	dispatched	`null`
copy	dispatched	`null`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
animationend	forwarded	--

`CodeSnippetSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
type	No	`let`	No	`"single" \| "multi"`	`"single"`	Set the type of code snippet

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Column`

Types

export type ColumnSize = boolean | number;

export interface ColumnSizeDescriptor {
  span?: ColumnSize;
  offset: number;
}

export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
as	No	`let`	No	`boolean`	`false`	Set to `true` to render a custom HTML element Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)
noGutter	No	`let`	No	`boolean`	`false`	Set to `true` to remove the gutter
noGutterLeft	No	`let`	No	`boolean`	`false`	Set to `true` to remove the left gutter
noGutterRight	No	`let`	No	`boolean`	`false`	Set to `true` to remove the right gutter
padding	No	`let`	No	`boolean`	`false`	Set to `true` to add top and bottom padding to the column
aspectRatio	No	`let`	No	`"2x1" \| "16x9" \| "9x16" \| "1x2" \| "4x3" \| "3x4" \| "1x1"`	`undefined`	Specify the aspect ratio of the column
sm	No	`let`	No	`ColumnBreakpoint`	`undefined`	Set the small breakpoint
md	No	`let`	No	`ColumnBreakpoint`	`undefined`	Set the medium breakpoint
lg	No	`let`	No	`ColumnBreakpoint`	`undefined`	Set the large breakpoint
xlg	No	`let`	No	`ColumnBreakpoint`	`undefined`	Set the extra large breakpoint
max	No	`let`	No	`ColumnBreakpoint`	`undefined`	Set the maximum breakpoint

Slots

Slot name	Default	Props	Fallback
--	Yes	`{props: { class: string; [key: string]: any; }}`	--

Events

None.

`ComboBox`

Types

export type ComboBoxItemId = any;

export interface ComboBoxItem {
  id: ComboBoxItemId;
  text: string;
  disabled?: boolean;
}

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
listRef	No	`let`	Yes	`null \| HTMLDivElement`	`null`	Obtain a reference to the list HTML element
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
open	No	`let`	Yes	`boolean`	`false`	Set to `true` to open the combobox menu dropdown
value	No	`let`	Yes	`string`	`""`	Specify the selected combobox value
selectedId	No	`let`	Yes	`ComboBoxItemId`	`undefined`	Set the selected item by value id
items	No	`let`	No	`ReadonlyArray`	`[]`	Set the combobox items
itemToString	No	`let`	No	`(item: ComboBoxItem) => string`	`(item) => item.text \|\| item.id`	Override the display of a combobox item
direction	No	`let`	No	`"bottom" \| "top"`	`"bottom"`	Specify the direction of the combobox dropdown menu
size	No	`let`	No	`"sm" \| "xl"`	`undefined`	Set the size of the combobox
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the combobox
titleText	No	`let`	No	`string`	`""`	Specify the title text of the combobox
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
placeholder	No	`let`	No	`string`	`""`	Specify the placeholder text
helperText	No	`let`	No	`string`	`""`	Specify the helper text
invalidText	No	`let`	No	`string`	`""`	Specify the invalid state text
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
warn	No	`let`	No	`boolean`	`false`	Set to `true` to indicate a warning state
warnText	No	`let`	No	`string`	`""`	Specify the warning state text
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
allowCustomValue	No	`let`	No	`boolean`	`false`	Set to `true` to allow custom values that are not in the items list. By default, user-entered text is cleared when the combobox loses focus without selecting an item. When enabled, custom text is preserved.
clearFilterOnOpen	No	`let`	No	`boolean`	`false`	Set to `true` to clear the input value when opening the dropdown. This allows users to see all available items instead of only filtered results. The original value is restored if the dropdown is closed without making a selection.
shouldFilterItem	No	`let`	No	`(item: ComboBoxItem, value: string) => boolean`	`() => true`	Determine if an item should be filtered given the current combobox value
translateWithId	No	`let`	No	`(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string`	`undefined`	Override the chevron icon label based on the open state. Defaults to "Open menu" when closed and "Close menu" when open
translateWithIdSelection	No	`let`	No	`(id: "clearSelection") => string`	`undefined`	Override the label of the clear button when the input has a selection. Defaults to "Clear selected item" since a combo box can only have on selection.
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the list box component
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the input
clear	No	`function`	No	`(options?: { focus?: boolean; }) => void`	`() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = ""; if (options?.focus !== false) ref?.focus(); }`	Clear the combo box programmatically

Slots

Slot name	Default	Props	Fallback
--	Yes	`{ item: ComboBoxItem; index: number }`	`{itemToString(item)}`
titleText	No	--	`{titleText}`

Events

Event name	Type	Detail
select	dispatched	`{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }`
clear	dispatched	`KeyboardEvent \| MouseEvent`
input	forwarded	--
keydown	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	forwarded	--
paste	forwarded	--
scroll	forwarded	--

`ComposedModal`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLDivElement`	`null`	Obtain a reference to the top-level HTML element
open	No	`let`	Yes	`boolean`	`false`	Set to `true` to open the modal
size	No	`let`	No	`"xs" \| "sm" \| "lg"`	`undefined`	Set the size of the composed modal
danger	No	`let`	No	`boolean`	`false`	Set to `true` to use the danger variant
preventCloseOnClickOutside	No	`let`	No	`boolean`	`false`	Set to `true` to prevent the modal from closing when clicking outside
containerClass	No	`let`	No	`string`	`""`	Specify a class for the inner modal
selectorPrimaryFocus	No	`let`	No	`null \| string`	`"[data-modal-primary-focus]"`	Specify a selector to be focused when opening the modal

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
close	dispatched	`{ trigger: "escape-key" \| "outside-click" \| "close-button" }`
transitionend	dispatched	`{ open: boolean; }`
keydown	forwarded	--
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
submit	dispatched	`null`
click:button--primary	dispatched	`null`
open	dispatched	`null`

`Content`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
id	No	`let`	No	`string`	`"main-content"`	Specify the id for the main element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`ContentSwitcher`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
selectedIndex	No	`let`	Yes	`number`	`0`	Set the selected index of the switch item
size	No	`let`	No	`"sm" \| "xl"`	`undefined`	Specify the size of the content switcher

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
change	dispatched	`number`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`ContextMenu`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLUListElement`	`null`	Obtain a reference to the unordered list HTML element
y	No	`let`	Yes	`number`	`0`	Specify the vertical offset of the menu position
x	No	`let`	Yes	`number`	`0`	Specify the horizontal offset of the menu position
open	No	`let`	Yes	`boolean`	`false`	Set to `true` to open the menu Either `x` and `y` must be greater than zero
target	No	`let`	No	`null \| ReadonlyArray<null \| HTMLElement>`	`null`	Specify an element or list of elements to trigger the context menu. If no element is specified, the context menu applies to the entire window

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
open	dispatched	`HTMLElement`
click	forwarded	--
keydown	forwarded	--
close	dispatched	`null`

`ContextMenuDivider`

Props

None.

Slots

None.

Events

None.

`ContextMenuGroup`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
selectedIds	No	`let`	Yes	`ReadonlyArray`	`[]`	--
labelText	No	`let`	No	`string`	`""`	Specify the label text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`ContextMenuOption`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLLIElement`	`null`	Obtain a reference to the list item HTML element
selectable	No	`let`	Yes	`boolean`	`false`	Set to `true` to enable the selectable variant Automatically set to `true` if `selected` is `true`
selected	No	`let`	Yes	`boolean`	`false`	Set to `true` to use the selected variant
icon	No	`let`	Yes	`any`	`undefined`	Specify the icon to render Icon is rendered to the left of the label text
indented	No	`let`	Yes	`boolean`	`false`	Set to `true` to indent the label
kind	No	`let`	No	`"default" \| "danger"`	`"default"`	Specify the kind of option
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to enable the disabled state
labelText	No	`let`	No	`string`	`""`	Specify the label text. Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`)
shortcutText	No	`let`	No	`string`	`""`	Specify the shortcut text. Alternatively, use the "shortcutText" slot (e.g., `<span slot="shortcutText">...</span>`)
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Specify the id It's recommended to provide an id as a value to bind to within a selectable/radio menu group

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
icon	No	--	`<svelte:component this={icon} />`
labelText	No	--	`{labelText}`
shortcutText	No	--	`{shortcutText}`

Events

Event name	Type	Detail
keydown	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
click	dispatched	`null`

`ContextMenuRadioGroup`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
selectedId	No	`let`	Yes	`string`	`""`	Set the selected radio group id
labelText	No	`let`	No	`string`	`""`	Specify the label text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`CopyButton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
feedback	No	`let`	No	`string`	`"Copied!"`	Set the feedback text shown after clicking the button
feedbackTimeout	No	`let`	No	`number`	`2000`	Set the timeout duration (ms) to display feedback text
iconDescription	No	`let`	No	`string`	`"Copy to clipboard"`	Set the title and ARIA label for the copy button
text	Yes	`let`	No	`string`	`undefined`	Specify the text to copy
copy	No	`let`	No	`(text: string) => void`	`async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }`	Override the default copy behavior of using the navigator.clipboard.writeText API to copy text

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
animationend	forwarded	--
copy	dispatched	`null`

`DataTable`

Types

export type DataTableKey<Row = DataTableRow> =
  import("./DataTableTypes.d.ts").PropertyPath<Row>;

export type DataTableValue = any;

export interface DataTableEmptyHeader<Row = DataTableRow> {
  key: DataTableKey<Row> | (string & {});
  empty: boolean;
  display?: (item: DataTableValue, row: Row) => DataTableValue;
  sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
  columnMenu?: boolean;
  width?: string;
  minWidth?: string;
}

export interface DataTableNonEmptyHeader<Row = DataTableRow> {
  key: DataTableKey<Row>;
  value: DataTableValue;
  display?: (item: DataTableValue, row: Row) => DataTableValue;
  sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
  columnMenu?: boolean;
  width?: string;
  minWidth?: string;
}

export type DataTableHeader<Row = DataTableRow> =
  | DataTableNonEmptyHeader<Row>
  | DataTableEmptyHeader<Row>;

export interface DataTableRow {
  id: any;
  [key: string]: DataTableValue;
}

export type DataTableRowId = any;

export interface DataTableCell<Row = DataTableRow> {
  key: DataTableKey<Row> | (string & {});
  value: DataTableValue;
  display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
}

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
selectedRowIds	No	`let`	Yes	`ReadonlyArray`	`[]`	Specify the row ids to be selected
selectable	No	`let`	Yes	`boolean`	`false`	Set to `true` for the selectable variant Automatically set to `true` if `radio` or `batchSelection` are `true`
expandedRowIds	No	`let`	Yes	`ReadonlyArray`	`[]`	Specify the row ids to be expanded
expandable	No	`let`	Yes	`boolean`	`false`	Set to `true` for the expandable variant Automatically set to `true` if `batchExpansion` is `true`
sortDirection	No	`let`	Yes	`"none" \| "ascending" \| "descending"`	`"none"`	Specify the sort direction
sortKey	No	`let`	Yes	`DataTableKey`	`null`	Specify the header key to sort by
headers	No	`let`	No	`ReadonlyArray<DataTableHeader>`	`[]`	Specify the data table headers
rows	No	`let`	No	`ReadonlyArray`	`[]`	Specify the rows the data table should render keys defined in `headers` are used for the row ids
size	No	`let`	No	`"compact" \| "short" \| "medium" \| "tall"`	`undefined`	Set the size of the data table
title	No	`let`	No	`string`	`""`	Specify the title of the data table
description	No	`let`	No	`string`	`""`	Specify the description of the data table
inputName	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Specify a name attribute for the input elements in a selectable data table (radio or checkbox). When the table is inside a form, this name will be included in the form data on submit.
zebra	No	`let`	No	`boolean`	`false`	Set to `true` to use zebra styles
sortable	No	`let`	No	`boolean`	`false`	Set to `true` for the sortable variant
batchExpansion	No	`let`	No	`boolean`	`false`	Set to `true` to enable batch expansion
nonExpandableRowIds	No	`let`	No	`ReadonlyArray`	`[]`	Specify the ids for rows that should not be expandable
radio	No	`let`	No	`boolean`	`false`	Set to `true` for the radio selection variant
batchSelection	No	`let`	No	`boolean`	`false`	Set to `true` to enable batch selection
nonSelectableRowIds	No	`let`	No	`ReadonlyArray`	`[]`	Specify the ids of rows that should not be selectable
stickyHeader	No	`let`	No	`boolean`	`false`	Set to `true` to enable a sticky header
useStaticWidth	No	`let`	No	`boolean`	`false`	Set to `true` to use static width
pageSize	No	`let`	No	`number`	`0`	Specify the number of items to display in a page
page	No	`let`	No	`number`	`0`	Set to `number` to set current page

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
cell	No	`{ row: Row; cell: DataTableCell; rowIndex: number; cellIndex: number; rowSelected: boolean; rowExpanded: boolean; }`	`{cell.display ? cell.display(cell.value, row) : cell.value}`
cell-header	No	`{ header: DataTableNonEmptyHeader; }`	`{header.value}`
description	No	`{ props: { class: "bx--data-table-header__description" } }`	`<p class:bx--data-table-header__description={true}>{description}</p>`
expanded-row	No	`{ row: Row; rowSelected: boolean; }`	--
title	No	`{ props: { class: "bx--data-table-header__title" } }`	`<h4 class:bx--data-table-header__title={true}>{title}</h4>`

Events

Event name	Type	Detail
click	dispatched	`{ header?: DataTableHeader; row?: Row; cell?: DataTableCell; }`
click:header--expand	dispatched	`{ expanded: boolean; }`
click:header	dispatched	`{ header: DataTableHeader; sortDirection?: "ascending" \| "descending" \| "none"; target: EventTarget; currentTarget: EventTarget; }`
click:header--select	dispatched	`{ indeterminate: boolean; selected: boolean; }`
click:row	dispatched	`{ row: Row; target: EventTarget; currentTarget: EventTarget; }`
mouseenter:row	dispatched	`Row`
mouseleave:row	dispatched	`Row`
click:row--expand	dispatched	`{ expanded: boolean; row: Row; }`
click:row--select	dispatched	`{ selected: boolean; row: Row; }`
click:cell	dispatched	`{ cell: DataTableCell; target: EventTarget; currentTarget: EventTarget; }`

`DataTableSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
columns	No	`let`	No	`number`	`5`	Specify the number of columns Superseded by `headers` if `headers` is a non-empty array
rows	No	`let`	No	`number`	`5`	Specify the number of rows
size	No	`let`	No	`"compact" \| "short" \| "tall"`	`undefined`	Set the size of the data table
zebra	No	`let`	No	`boolean`	`false`	Set to `true` to apply zebra styles to the datatable rows
showHeader	No	`let`	No	`boolean`	`true`	Set to `false` to hide the header
headers	No	`let`	No	`ReadonlyArray<string \| Partial>`	`[]`	Set the column headers Supersedes `columns` if value is a non-empty array
showToolbar	No	`let`	No	`boolean`	`true`	Set to `false` to hide the toolbar

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`DatePicker`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
valueTo	No	`let`	Yes	`string`	`""`	Specify the date picker end date value (to) Only works with the "range" date picker type
valueFrom	No	`let`	Yes	`string`	`""`	Specify the date picker start date value (from) Only works with the "range" date picker type
value	No	`let`	Yes	`number \| string`	`""`	Specify the date picker input value
datePickerType	No	`let`	No	`"simple" \| "single" \| "range"`	`"simple"`	Specify the date picker type
dateFormat	No	`let`	No	`string`	`"m/d/Y"`	Specify the date format
maxDate	No	`let`	No	`null \| string \| Date`	`null`	Specify the maximum date
minDate	No	`let`	No	`null \| string \| Date`	`null`	Specify the minimum date
locale	No	`let`	No	`import("flatpickr/dist/types/locale").CustomLocale \| import("flatpickr/dist/types/locale").key`	`"en"`	Specify the locale
short	No	`let`	No	`boolean`	`false`	Set to `true` to use the short variant
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the date picker element
flatpickrProps	No	`let`	No	`import("flatpickr/dist/types/options").Options`	`{ static: true }`	Override the options passed to the Flatpickr instance. @see https://flatpickr.js.org/options

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
change	dispatched	`string \| { selectedDates: [dateFrom: Date, dateTo?: Date]; dateStr: string \| { from: string; to: string; } }`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`DatePickerInput`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
size	No	`let`	No	`"sm" \| "xl"`	`undefined`	Set the size of the input
type	No	`let`	No	`string`	`"text"`	Specify the input type
placeholder	No	`let`	No	`string`	`""`	Specify the input placeholder text
pattern	No	`let`	No	`string`	`"\d{1,2}\/\d{1,2}\/\d{4}"`	Specify the Regular Expression for the input value
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the input
helperText	No	`let`	No	`string`	`""`	Specify the helper text
iconDescription	No	`let`	No	`string`	`""`	Specify the ARIA label for the calendar icon
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input element
labelText	No	`let`	No	`string`	`""`	Specify the label text
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
invalidText	No	`let`	No	`string`	`""`	Specify the invalid state text
warn	No	`let`	No	`boolean`	`false`	Set to `true` to indicate a warning state
warnText	No	`let`	No	`string`	`""`	Specify the warning state text
name	No	`let`	No	`string`	`undefined`	Set a name for the input element

Slots

Slot name	Default	Props	Fallback
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
input	forwarded	--
keydown	forwarded	--
keyup	forwarded	--
blur	forwarded	--
paste	forwarded	--

`DatePickerSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
range	No	`let`	No	`boolean`	`false`	Set to `true` to use the range variant
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id to be used by the label element

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Dropdown`

Types

export type DropdownItemId = any;

export type DropdownItemText = string;

export interface DropdownItem {
  id: DropdownItemId;
  text: DropdownItemText;
  disabled?: boolean;
}

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLButtonElement`	`null`	Obtain a reference to the button HTML element
open	No	`let`	Yes	`boolean`	`false`	Set to `true` to open the dropdown
selectedId	Yes	`let`	Yes	`DropdownItemId`	`undefined`	Specify the selected item id
items	No	`let`	No	`ReadonlyArray`	`[]`	Set the dropdown items
itemToString	No	`let`	No	`(item: DropdownItem) => string`	`(item) => item.text \|\| item.id`	Override the display of a dropdown item
type	No	`let`	No	`"default" \| "inline"`	`"default"`	Specify the type of dropdown
direction	No	`let`	No	`"bottom" \| "top"`	`"bottom"`	Specify the direction of the dropdown menu
size	No	`let`	No	`"sm" \| "lg" \| "xl"`	`undefined`	Specify the size of the dropdown field
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the dropdown
titleText	No	`let`	No	`string`	`""`	Specify the title text
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
invalidText	No	`let`	No	`string`	`""`	Specify the invalid state text
warn	No	`let`	No	`boolean`	`false`	Set to `true` to indicate a warning state
warnText	No	`let`	No	`string`	`""`	Specify the warning state text
helperText	No	`let`	No	`string`	`""`	Specify the helper text
label	No	`let`	No	`string`	`undefined`	Specify the list box label
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
translateWithId	No	`let`	No	`(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string`	`undefined`	Override the chevron icon label based on the open state. Defaults to "Open menu" when closed and "Close menu" when open
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the list box component
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the list box

Slots

Slot name	Default	Props	Fallback
--	Yes	`{ item: DropdownItem; index: number; }`	`{itemToString(item)}`

Events

Event name	Type	Detail
select	dispatched	`{ selectedId: DropdownItemId, selectedItem: DropdownItem }`

`DropdownSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
inline	No	`let`	No	`boolean`	`false`	Set to `true` to use the inline variant

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`ExpandableTile`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLButtonElement`	`null`	Obtain a reference to the top-level element
tilePadding	No	`let`	Yes	`number`	`0`	Specify the padding of the tile (number of pixels)
tileMaxHeight	No	`let`	Yes	`number`	`0`	Specify the max height of the tile (number of pixels)
expanded	No	`let`	Yes	`boolean`	`false`	Set to `true` to expand the tile
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
tileCollapsedIconText	No	`let`	No	`string`	`"Interact to expand Tile"`	Specify the icon text of the collapsed tile
tileExpandedIconText	No	`let`	No	`string`	`"Interact to collapse Tile"`	Specify the icon text of the expanded tile
tileExpandedLabel	No	`let`	No	`string`	`""`	Specify the icon label of the expanded tile
tileCollapsedLabel	No	`let`	No	`string`	`""`	Specify the icon label of the collapsed tile
tabindex	No	`let`	No	`string`	`"0"`	Specify the tabindex
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the top-level div element

Slots

Slot name	Default	Props	Fallback
above	No	--	--
below	No	--	--

Events

Event name	Type	Detail
click	forwarded	--
keypress	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`FileUploader`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
files	No	`let`	Yes	`ReadonlyArray`	`[]`	Obtain a reference to the uploaded files
status	No	`let`	No	`"uploading" \| "edit" \| "complete"`	`"uploading"`	Specify the file uploader status
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the file uploader
accept	No	`let`	No	`ReadonlyArray`	`[]`	Specify the accepted file types
multiple	No	`let`	No	`boolean`	`false`	Set to `true` to allow multiple files
clearFiles	No	`const`	No	`() => void`	`() => { files = []; }`	Programmatically clear the uploaded files
labelTitle	No	`let`	No	`string`	`""`	Specify the label title. Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`)
labelDescription	No	`let`	No	`string`	`""`	Specify the label description. Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`)
kind	No	`let`	No	`import("../Button/Button.svelte").ButtonProps["kind"]`	`"primary"`	Specify the kind of file uploader button
size	No	`let`	No	`import("../Button/Button.svelte").ButtonProps["size"]`	`"small"`	Specify the size of the file uploader button
buttonLabel	No	`let`	No	`string`	`""`	Specify the button label
iconDescription	No	`let`	No	`string`	`"Provide icon description"`	Specify the ARIA label used for the status icons
name	No	`let`	No	`string`	`""`	Specify a name attribute for the file button uploader input

Slots

Slot name	Default	Props	Fallback
labelDescription	No	--	`{labelDescription}`
labelTitle	No	--	`{labelTitle}`

Events

Event name	Type	Detail
add	dispatched	`ReadonlyArray`
remove	dispatched	`ReadonlyArray`
change	dispatched	`ReadonlyArray`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--

`FileUploaderButton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
labelText	No	`let`	Yes	`string`	`"Add file"`	Specify the label text
files	No	`let`	Yes	`ReadonlyArray`	`[]`	Obtain a reference to the uploaded files
accept	No	`let`	No	`ReadonlyArray`	`[]`	Specify the accepted file types
multiple	No	`let`	No	`boolean`	`false`	Set to `true` to allow multiple files
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the input
disableLabelChanges	No	`let`	No	`boolean`	`false`	Set to `true` to disable label changes
kind	No	`let`	No	`import("../Button/Button.svelte").ButtonProps["kind"]`	`"primary"`	Specify the kind of file uploader button
size	No	`let`	No	`import("../Button/Button.svelte").ButtonProps["size"]`	`"small"`	Specify the size of the file uploader button
role	No	`let`	No	`string`	`"button"`	Specify the label role
tabindex	No	`let`	No	`string`	`"0"`	Specify `tabindex` attribute
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input element
name	No	`let`	No	`string`	`""`	Specify a name attribute for the input

Slots

Slot name	Default	Props	Fallback
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
change	dispatched	`ReadonlyArray`
keydown	forwarded	--
click	forwarded	--

`FileUploaderDropContainer`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
files	No	`let`	Yes	`ReadonlyArray`	`[]`	Obtain a reference to the uploaded files
accept	No	`let`	No	`ReadonlyArray`	`[]`	Specify the accepted file types
multiple	No	`let`	No	`boolean`	`false`	Set to `true` to allow multiple files
validateFiles	No	`let`	No	`(files: ReadonlyArray) => ReadonlyArray`	`(files) => files`	Override the default behavior of validating uploaded files. By default, files are not validated
labelText	No	`let`	No	`string`	`"Add file"`	Specify the label text
role	No	`let`	No	`string`	`"button"`	Specify the `role` attribute of the drop container
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the input
tabindex	No	`let`	No	`string`	`"0"`	Specify `tabindex` attribute
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input element
name	No	`let`	No	`string`	`""`	Specify a name attribute for the input

Slots

Slot name	Default	Props	Fallback
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
add	dispatched	`ReadonlyArray`
change	dispatched	`ReadonlyArray`
dragover	forwarded	--
dragleave	forwarded	--
drop	forwarded	--
keydown	forwarded	--
click	forwarded	--

`FileUploaderItem`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
status	No	`let`	No	`"uploading" \| "edit" \| "complete"`	`"uploading"`	Specify the file uploader status
size	No	`let`	No	`"default" \| "field" \| "small"`	`"default"`	Specify the size of button skeleton
iconDescription	No	`let`	No	`string`	`""`	Specify the ARIA label used for the status icons
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
errorSubject	No	`let`	No	`string`	`""`	Specify the error subject text
errorBody	No	`let`	No	`string`	`""`	Specify the error body text
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the top-level element
name	No	`let`	No	`string`	`""`	Specify the file uploader name

Slots

None.

Events

Event name	Type	Detail
delete	dispatched	`string`
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`FileUploaderSkeleton`

Props

None.

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Filename`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
status	No	`let`	No	`"uploading" \| "edit" \| "complete"`	`"uploading"`	Specify the file name status
iconDescription	No	`let`	No	`string`	`""`	Specify the ARIA label used for the status icons
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
keydown	forwarded	--

`FluidForm`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
keydown	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
submit	forwarded	--

`Form`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLFormElement`	`null`	Obtain a reference to the form element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
keydown	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
submit	forwarded	--

`FormGroup`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
noMargin	No	`let`	No	`boolean`	`false`	Set to `true` for to remove the bottom margin
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
message	No	`let`	No	`boolean`	`false`	Set to `true` to render a form requirement
messageText	No	`let`	No	`string`	`""`	Specify the message text
legendText	No	`let`	No	`string`	`""`	Specify the legend text
legendId	No	`let`	No	`string`	`""`	Specify an id for the legend element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`FormItem`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`FormLabel`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id to be used by the label element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Grid`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
as	No	`let`	No	`boolean`	`false`	Set to `true` to render a custom HTML element Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)
condensed	No	`let`	No	`boolean`	`false`	Set to `true` to use the condensed variant
narrow	No	`let`	No	`boolean`	`false`	Set to `true` to use the narrow variant
fullWidth	No	`let`	No	`boolean`	`false`	Set to `true` to use the fullWidth variant
noGutter	No	`let`	No	`boolean`	`false`	Set to `true` to remove the gutter
noGutterLeft	No	`let`	No	`boolean`	`false`	Set to `true` to remove the left gutter
noGutterRight	No	`let`	No	`boolean`	`false`	Set to `true` to remove the right gutter
padding	No	`let`	No	`boolean`	`false`	Set to `true` to add top and bottom padding to all columns

Slots

Slot name	Default	Props	Fallback
--	Yes	`{ props: { class: string; [key: string]: any; } }`	--

Events

None.

`Header`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLAnchorElement`	`null`	Obtain a reference to the HTML anchor element
isSideNavOpen	No	`let`	Yes	`boolean`	`false`	Set to `true` to open the side nav
expandedByDefault	No	`let`	No	`boolean`	`true`	Set to `false` to hide the side nav by default
uiShellAriaLabel	No	`let`	No	`string`	`undefined`	Specify the ARIA label for the header
href	No	`let`	No	`string`	`undefined`	Specify the `href` attribute
company	No	`let`	No	`string`	`undefined`	Specify the company name. Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
platformName	No	`let`	No	`string`	`""`	Specify the platform name. Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`)
persistentHamburgerMenu	No	`let`	No	`boolean`	`false`	Set to `true` to persist the hamburger menu
expansionBreakpoint	No	`let`	No	`number`	`1056`	The window width (px) at which the SideNav is expanded and the hamburger menu is hidden. 1056 represents the "large" breakpoint in pixels from the Carbon Design System: - small: 320 - medium: 672 - large: 1056 - x-large: 1312 - max: 1584
iconMenu	No	`let`	No	`any`	`undefined`	Specify the icon to render for the closed state. Defaults to `<Menu size={20} />`
iconClose	No	`let`	No	`any`	`undefined`	Specify the icon to render for the opened state. Defaults to `<Close size={20} />`
ariaLabelMenu	No	`let`	No	`string`	`undefined`	Specify the ARIA label for the hamburger menu. Defaults to "Open menu" or "Close menu" based on `isSideNavOpen` state.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
company	No	--	`{company}`
platform	No	--	`{platformName}`
skip-to-content	No	--	--

Events

Event name	Type	Detail
click	forwarded	--

`HeaderAction`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLButtonElement`	`null`	Obtain a reference to the button HTML element
isOpen	No	`let`	Yes	`boolean`	`false`	Set to `true` to open the panel
icon	No	`let`	No	`any`	`undefined`	Specify the icon to render when the action panel is closed. Defaults to `<Switcher size={20} />`
closeIcon	No	`let`	No	`any`	`undefined`	Specify the icon to render when the action panel is open. Defaults to `<Close size={20} />`
text	No	`let`	No	`string`	`undefined`	Specify the text displayed next to the icon. Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`)
iconDescription	No	`let`	No	`string`	`undefined`	Specify an icon tooltip. The tooltip will not be displayed if either the `text` prop or a named slot="text" is used
tooltipAlignment	No	`let`	No	`"start" \| "center" \| "end"`	`"center"`	Set the alignment of the tooltip relative to the icon. Only applies when `iconDescription` is provided
transition	No	`let`	No	`false \| import("svelte/transition").SlideParams`	`{ duration: 200 }`	Customize the panel transition (i.e., `transition:slide`). Set to `false` to disable the transition
preventCloseOnClickOutside	No	`let`	No	`boolean`	`false`	Set to `true` to prevent the panel from closing when clicking outside

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
closeIcon	No	--	`<svelte:component this={closeIcon} size={20} />`
icon	No	--	`<svelte:component this={icon} size={20} />`
text	No	--	`{#if text}<span class:bx--header__action-text={true}>{text}</span>{/if}`

Events

Event name	Type	Detail
open	dispatched	`null`
close	dispatched	`null`
click	forwarded	--

`HeaderActionLink`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLAnchorElement`	`null`	Obtain a reference to the HTML anchor element
linkIsActive	No	`let`	No	`boolean`	`false`	Set to `true` to use the active state
href	No	`let`	No	`string`	`undefined`	Specify the `href` attribute
icon	No	`let`	No	`any`	`undefined`	Specify the icon to render

Slots

Slot name	Default	Props	Fallback
icon	No	--	`<svelte:component this={icon} size={20} />`

Events

Event name	Type	Detail
click	forwarded	--

`HeaderGlobalAction`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`HTMLButtonElement`	`null`	Obtain a reference to the HTML button element
isActive	No	`let`	No	`boolean`	`false`	Set to `true` to use the active variant
icon	No	`let`	No	`any`	`undefined`	Specify the icon to render

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--

`HeaderNav`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`HeaderNavItem`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLAnchorElement`	`null`	Obtain a reference to the HTML anchor element
href	No	`let`	No	`string`	`undefined`	Specify the `href` attribute
text	No	`let`	No	`string`	`undefined`	Specify the text
isSelected	No	`let`	No	`boolean`	`false`	Set to `true` to select the item

Slots

Slot name	Default	Props	Fallback
--	Yes	--	`{text}`

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keyup	forwarded	--
keydown	forwarded	--
focus	forwarded	--
blur	forwarded	--

`HeaderNavMenu`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLAnchorElement`	`null`	Obtain a reference to the HTML anchor element
expanded	No	`let`	Yes	`boolean`	`false`	Set to `true` to toggle the expanded state
href	No	`let`	No	`string`	`"/"`	Specify the `href` attribute
text	No	`let`	No	`string`	`undefined`	Specify the text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
keydown	forwarded	--
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	forwarded	--

`HeaderPanelDivider`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`HeaderPanelLink`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLAnchorElement`	`null`	Obtain a reference to the HTML anchor element
href	No	`let`	No	`string`	`undefined`	Specify the `href` attribute

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--

`HeaderPanelLinks`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`HeaderSearch`

Types

export interface HeaderSearchResult {
  href: string;
  text: string;
  description?: string;
}

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
selectedResultIndex	No	`let`	Yes	`number`	`0`	Specify the selected result index
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
active	No	`let`	Yes	`boolean`	`false`	Set to `true` to activate and focus the search bar
value	No	`let`	Yes	`string`	`""`	Specify the search input value
results	No	`let`	No	`ReadonlyArray`	`[]`	Render a list of search results

Slots

Slot name	Default	Props	Fallback
--	Yes	`{ result: HeaderSearchResult; index: number }`	`{result.text} {#if result.description}<span class:bx--header-search-menu-description={true} >– {result.description}</span >{/if}`

Events

Event name	Type	Detail
active	dispatched	`null`
inactive	dispatched	`null`
clear	dispatched	`null`
select	dispatched	`{ value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult }`
change	forwarded	--
input	forwarded	--
focus	forwarded	--
blur	forwarded	--
keydown	forwarded	--
paste	forwarded	--

`HeaderUtilities`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`ImageLoader`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
error	No	`let`	Yes	`boolean`	`false`	Set to `true` if an error occurs when loading the image
loaded	No	`let`	Yes	`boolean`	`false`	Set to `true` when the image is loaded
loading	No	`let`	Yes	`boolean`	`false`	Set to `true` when `loaded` is `true` and `error` is false
src	No	`let`	No	`string`	`""`	Specify the image source
alt	No	`let`	No	`string`	`""`	Specify the image alt text
ratio	No	`let`	No	`"2x1" \| "16x9" \| "4x3" \| "1x1" \| "3x4" \| "3x2" \| "9x16" \| "1x2"`	`undefined`	Specify the aspect ratio for the image wrapper
fadeIn	No	`let`	No	`boolean`	`false`	Set to `true` to fade in the image on load The duration uses the `fast-02` value following Carbon guidelines on motion
loadImage	No	`const`	No	`(url?: string) => void`	`(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url \|\| src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }`	Method invoked to load the image provided a `src` value

Slots

Slot name	Default	Props	Fallback
error	No	--	--
loading	No	--	--

Events

Event name	Type	Detail
load	dispatched	`null`
error	dispatched	`null`

`InlineLoading`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
status	No	`let`	No	`"active" \| "inactive" \| "finished" \| "error"`	`"active"`	Set the loading status
description	No	`let`	No	`string`	`undefined`	Set the loading description
iconDescription	No	`let`	No	`string`	`undefined`	Specify a description for the loading icon. Defaults to the `status` prop for the "error" and "finished" states
successDelay	No	`let`	No	`number`	`1500`	Specify the timeout delay (ms) after `status` is set to "success"

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
success	dispatched	`null`

`InlineNotification`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
kind	No	`let`	No	`"error" \| "info" \| "info-square" \| "success" \| "warning" \| "warning-alt"`	`"error"`	Specify the kind of notification
lowContrast	No	`let`	No	`boolean`	`false`	Set to `true` to use the low contrast variant
timeout	No	`let`	No	`number`	`0`	Set the timeout duration (ms) to hide the notification after opening it
role	No	`let`	No	`string`	`"alert"`	Set the `role` attribute
title	No	`let`	No	`string`	`""`	Specify the title text
subtitle	No	`let`	No	`string`	`""`	Specify the subtitle text
hideCloseButton	No	`let`	No	`boolean`	`false`	Set to `true` to hide the close button
statusIconDescription	No	`let`	No	`string`	`kind + " icon"`	Specify the ARIA label for the status icon
closeButtonDescription	No	`let`	No	`string`	`"Close notification"`	Specify the ARIA label for the close button

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
actions	No	--	--
subtitle	No	--	`{subtitle}`
title	No	--	`{title}`

Events

Event name	Type	Detail
close	dispatched	`{ timeout: boolean }`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Link`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLAnchorElement`	`null`	Obtain a reference to the top-level HTML element
size	No	`let`	No	`"sm" \| "lg"`	`undefined`	Specify the size of the link
href	No	`let`	No	`string`	`undefined`	Specify the href value
inline	No	`let`	No	`boolean`	`false`	Set to `true` to use the inline variant
icon	No	`let`	No	`any`	`undefined`	Specify the icon to render `inline` must be `false`
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the checkbox
visited	No	`let`	No	`boolean`	`false`	Set to `true` to allow visited styles

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
icon	No	--	`<svelte:component this={icon} />`

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`ListBox`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
size	No	`let`	No	`"sm" \| "xl"`	`undefined`	Set the size of the list box
type	No	`let`	No	`"default" \| "inline"`	`"default"`	Set the type of the list box
open	No	`let`	No	`boolean`	`false`	Set to `true` to open the list box
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the list box
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
invalidText	No	`let`	No	`string`	`""`	Specify the invalid state text
warn	No	`let`	No	`boolean`	`false`	Set to `true` to indicate a warning state
warnText	No	`let`	No	`string`	`""`	Specify the warning state text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
keydown	forwarded	--
click	forwarded	--

`ListBoxField`

Types

export type ListBoxFieldTranslationId = "close" | "open";

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLDivElement`	`null`	Obtain a reference to the top-level HTML element
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the list box field
role	No	`let`	No	`string`	`"combobox"`	Specify the role attribute
tabindex	No	`let`	No	`string`	`"-1"`	Specify the tabindex
translationIds	No	`const`	No	`{ close: "close", open: "open" }`	`{ close: "close", open: "open" }`	Default translation ids
translateWithId	No	`let`	No	`(id: ListBoxFieldTranslationId) => string`	`(id) => defaultTranslations[id]`	Override the default translation ids
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--
focus	forwarded	--
blur	forwarded	--

`ListBoxMenu`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLDivElement`	`null`	Obtain a reference to the HTML element
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
scroll	forwarded	--

`ListBoxMenuIcon`

Types

export type ListBoxMenuIconTranslationId = "close" | "open";

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
open	No	`let`	No	`boolean`	`false`	Set to `true` to open the list box menu icon
translationIds	No	`const`	No	`{ close: "close", open: "open" }`	`{ close: "close", open: "open" }`	Default translation ids
translateWithId	No	`let`	No	`(id: ListBoxMenuIconTranslationId) => string`	`(id) => defaultTranslations[id]`	Override the default translation ids

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--

`ListBoxMenuItem`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
active	No	`let`	No	`boolean`	`false`	Set to `true` to enable the active state
highlighted	No	`let`	No	`boolean`	`false`	Set to `true` to enable the highlighted state
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the menu item

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`ListBoxSelection`

Types

export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLDivElement`	`null`	Obtain a reference to the top-level HTML element
selectionCount	No	`let`	No	`number`	`undefined`	Specify the number of selected items
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the list box selection
translationIds	No	`const`	No	`{ clearAll: "clearAll", clearSelection: "clearSelection", }`	`{ clearAll: "clearAll", clearSelection: "clearSelection", }`	Default translation ids
translateWithId	No	`let`	No	`(id: ListBoxSelectionTranslationId) => string`	`(id) => defaultTranslations[id]`	Override the default translation ids

Slots

None.

Events

Event name	Type	Detail
clear	dispatched	`KeyboardEvent \| MouseEvent`

`ListItem`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Loading`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
small	No	`let`	No	`boolean`	`false`	Set to `true` to use the small variant
active	No	`let`	No	`boolean`	`true`	Set to `false` to disable the active state
withOverlay	No	`let`	No	`boolean`	`true`	Set to `false` to disable the overlay
description	No	`let`	No	`string`	`"loading"`	Specify the description to describe the loading state

Slots

None.

Events

None.

`LocalStorage`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
value	No	`let`	Yes	`any`	`""`	Provide a value to persist
key	No	`let`	No	`string`	`"local-storage-key"`	Specify the local storage key
clearItem	No	`function`	No	`() => void`	`() => { localStorage.removeItem(key); }`	Remove the persisted key value from the browser's local storage
clearAll	No	`function`	No	`() => void`	`() => { localStorage.clear(); }`	Clear all key values from the browser's local storage

Slots

None.

Events

Event name	Type	Detail
save	dispatched	`null`
update	dispatched	`{ prevValue: any; value: any; }`

`Modal`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLDivElement`	`null`	Obtain a reference to the top-level HTML element
open	No	`let`	Yes	`boolean`	`false`	Set to `true` to open the modal
size	No	`let`	No	`"xs" \| "sm" \| "lg"`	`undefined`	Set the size of the modal
danger	No	`let`	No	`boolean`	`false`	Set to `true` to use the danger variant
alert	No	`let`	No	`boolean`	`false`	Set to `true` to enable alert mode
passiveModal	No	`let`	No	`boolean`	`false`	Set to `true` to use the passive variant
modalHeading	No	`let`	No	`string`	`undefined`	Specify the modal heading
modalLabel	No	`let`	No	`string`	`undefined`	Specify the modal label
modalAriaLabel	No	`let`	No	`string`	`undefined`	Specify the ARIA label for the modal
iconDescription	No	`let`	No	`string`	`"Close the modal"`	Specify the ARIA label for the close icon
hasForm	No	`let`	No	`boolean`	`false`	Set to `true` if the modal contains form elements
hasScrollingContent	No	`let`	No	`boolean`	`false`	Set to `true` if the modal contains scrolling content
primaryButtonText	No	`let`	No	`string`	`""`	Specify the primary button text
primaryButtonDisabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the primary button
primaryButtonIcon	No	`let`	No	`any`	`undefined`	Specify the primary button icon
shouldSubmitOnEnter	No	`let`	No	`boolean`	`true`	Set to `true` for the "submit" and "click:button--primary" events to be dispatched when pressing "Enter"
secondaryButtonText	No	`let`	No	`string`	`""`	Specify the secondary button text
secondaryButtons	No	`let`	No	`[{ text: string; }, { text: string; }]`	`[]`	2-tuple prop to render two secondary buttons for a 3 button modal supersedes `secondaryButtonText`
selectorPrimaryFocus	No	`let`	No	`string`	`"[data-modal-primary-focus]"`	Specify a selector to be focused when opening the modal
preventCloseOnClickOutside	No	`let`	No	`boolean`	`false`	Set to `true` to prevent the modal from closing when clicking outside
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
heading	No	--	`{modalHeading}`
label	No	--	`{modalLabel}`

Events

Event name	Type	Detail
close	dispatched	`{ trigger: "escape-key" \| "outside-click" \| "close-button" }`
transitionend	dispatched	`{ open: boolean; }`
click:button--secondary	dispatched	`{ text: string; }`
keydown	forwarded	--
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
submit	dispatched	`null`
click:button--primary	dispatched	`null`
open	dispatched	`null`

`ModalBody`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
hasForm	No	`let`	No	`boolean`	`false`	Set to `true` if the modal contains form elements
hasScrollingContent	No	`let`	No	`boolean`	`false`	Set to `true` if the modal contains scrolling content

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`ModalFooter`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
primaryButtonText	No	`let`	No	`string`	`""`	Specify the primary button text
primaryButtonIcon	No	`let`	No	`any`	`undefined`	Specify the primary button icon
primaryButtonDisabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the primary button
primaryClass	No	`let`	No	`string`	`undefined`	Specify a class for the primary button
secondaryButtonText	No	`let`	No	`string`	`""`	Specify the secondary button text
secondaryButtons	No	`let`	No	`[] \| [{ text: string; }, { text: string; }]`	`[]`	2-tuple prop to render two secondary buttons for a 3 button modal supersedes `secondaryButtonText`
secondaryClass	No	`let`	No	`string`	`undefined`	Specify a class for the secondary button
danger	No	`let`	No	`boolean`	`false`	Set to `true` to use the danger variant

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click:button--secondary	dispatched	`{ text: string; }`

`ModalHeader`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
title	No	`let`	No	`string`	`""`	Specify the modal title
label	No	`let`	No	`string`	`""`	Specify the modal label
labelClass	No	`let`	No	`string`	`""`	Specify the label class
titleClass	No	`let`	No	`string`	`""`	Specify the title class
closeClass	No	`let`	No	`string`	`""`	Specify the close class
closeIconClass	No	`let`	No	`string`	`""`	Specify the close icon class
iconDescription	No	`let`	No	`string`	`"Close"`	Specify the ARIA label for the close icon

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--

`MultiSelect`

Types

export type MultiSelectItemId = any;

export type MultiSelectItemText = string;

export interface MultiSelectItem {
  id: MultiSelectItemId;
  text: MultiSelectItemText;
  disabled?: boolean;
}

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
highlightedId	No	`let`	Yes	`null \| MultiSelectItemId`	`null`	Id of the highlighted ListBoxMenuItem
selectionRef	No	`let`	Yes	`null \| HTMLDivElement`	`null`	Obtain a reference to the selection element
fieldRef	No	`let`	Yes	`null \| HTMLDivElement`	`null`	Obtain a reference to the field box element
multiSelectRef	No	`let`	Yes	`null \| HTMLDivElement`	`null`	Obtain a reference to the outer div element
inputRef	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
open	No	`let`	Yes	`boolean`	`false`	Set to `true` to open the dropdown
value	No	`let`	Yes	`string`	`""`	Specify the multiselect value
selectedIds	No	`let`	Yes	`ReadonlyArray`	`[]`	Set the selected ids
items	No	`let`	No	`ReadonlyArray`	`[]`	Set the multiselect items
itemToString	No	`let`	No	`(item: MultiSelectItem) => any`	`(item) => item.text \|\| item.id`	Override the display of a multiselect item
itemToInput	No	`let`	No	`(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string }`	`(item) => {}`	Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs.
size	No	`let`	No	`"sm" \| "lg" \| "xl"`	`undefined`	Set the size of the combobox
type	No	`let`	No	`"default" \| "inline"`	`"default"`	Specify the type of multiselect
direction	No	`let`	No	`"bottom" \| "top"`	`"bottom"`	Specify the direction of the multiselect dropdown menu
selectionFeedback	No	`let`	No	`"top" \| "fixed" \| "top-after-reopen"`	`"top-after-reopen"`	Specify the selection feedback after selecting items
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the dropdown
filterable	No	`let`	No	`boolean`	`false`	Set to `true` to filter items
filterItem	No	`let`	No	`(item: MultiSelectItem, value: string) => boolean`	`(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())`	Override the filtering logic The default filtering is an exact string comparison
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
locale	No	`let`	No	`string`	`"en"`	Specify the locale
placeholder	No	`let`	No	`string`	`""`	Specify the placeholder text
sortItem	No	`let`	No	`((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) \| (() => void)`	`(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })`	Override the sorting logic The default sorting compare the item text value
translateWithId	No	`let`	No	`(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string`	`undefined`	Override the chevron icon label based on the open state. Defaults to "Open menu" when closed and "Close menu" when open
translateWithIdSelection	No	`let`	No	`(id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string`	`undefined`	Override the label of the clear button when the input has a selection. Defaults to "Clear selected item" and "Clear all items" if more than one item is selected
titleText	No	`let`	No	`string`	`""`	Specify the title text
useTitleInItem	No	`let`	No	`boolean`	`false`	Set to `true` to pass the item to `itemToString` in the checkbox
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
invalidText	No	`let`	No	`string`	`""`	Specify the invalid state text
warn	No	`let`	No	`boolean`	`false`	Set to `true` to indicate a warning state
warnText	No	`let`	No	`string`	`""`	Specify the warning state text
helperText	No	`let`	No	`string`	`""`	Specify the helper text
label	No	`let`	No	`string`	`""`	Specify the list box label
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the list box component
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the select

Slots

Slot name	Default	Props	Fallback
--	Yes	`{ item: MultiSelectItem; index: number }`	`{itemToString(item)}`
titleText	No	--	`{titleText}`

Events

Event name	Type	Detail
select	dispatched	`{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }`
clear	dispatched	`null`
blur	dispatched	`FocusEvent \| CustomEvent`
keydown	forwarded	--
input	forwarded	--
keyup	forwarded	--
focus	forwarded	--
paste	forwarded	--

`NotificationActionButton`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`NotificationButton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
notificationType	No	`let`	No	`"toast" \| "inline"`	`"toast"`	Set the type of notification
icon	No	`let`	No	`any`	`undefined`	Specify the icon to render
title	No	`let`	No	`string`	`undefined`	Specify the title of the icon
iconDescription	No	`let`	No	`string`	`"Close icon"`	Specify the ARIA label for the icon

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`NotificationIcon`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
kind	No	`let`	No	`"error" \| "info" \| "info-square" \| "success" \| "warning" \| "warning-alt"`	`"error"`	Specify the kind of notification icon
notificationType	No	`let`	No	`"toast" \| "inline"`	`"toast"`	Set the type of notification
iconDescription	Yes	`let`	No	--	`undefined`	Specify the ARIA label for the icon

Slots

None.

Events

None.

`NumberInput`

Types

export type NumberInputTranslationId = "increment" | "decrement";

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
value	No	`let`	Yes	`null \| number`	`null`	Specify the input value. Use `null` to denote "no value"
size	No	`let`	No	`"sm" \| "xl"`	`undefined`	Set the size of the input
step	No	`let`	No	`number`	`1`	Specify the step increment
max	No	`let`	No	`number`	`undefined`	Specify the maximum value
min	No	`let`	No	`number`	`undefined`	Specify the minimum value
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
readonly	No	`let`	No	`boolean`	`false`	Set to `true` for the input to be read-only
allowEmpty	No	`let`	No	`boolean`	`false`	Set to `true` to allow for an empty value
allowDecimal	No	`let`	No	`boolean`	`false`	Set to `true` to preserve decimal input formatting (e.g., "1.0", "2.00") When enabled, uses type="text" with inputmode="decimal" instead of type="number"
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the input
hideSteppers	No	`let`	No	`boolean`	`false`	Set to `true` to hide the input stepper buttons
iconDescription	No	`let`	No	`string`	`""`	Specify the ARIA label for the increment icons
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
invalidText	No	`let`	No	`string`	`""`	Specify the invalid state text
warn	No	`let`	No	`boolean`	`false`	Set to `true` to indicate a warning state
warnText	No	`let`	No	`string`	`""`	Specify the warning state text
helperText	No	`let`	No	`string`	`""`	Specify the helper text
label	No	`let`	No	`string`	`""`	Specify the label text
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
translateWithId	No	`let`	No	`(id: NumberInputTranslationId) => string`	`(id) => defaultTranslations[id]`	Override the default translation ids
translationIds	No	`const`	No	`{ increment: "increment"; decrement: "decrement" }`	`{ increment: "increment", decrement: "decrement", }`	Default translation ids
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input element
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the input

Slots

Slot name	Default	Props	Fallback
label	No	--	`{label}`

Events

Event name	Type	Detail
change	dispatched	`null \| number`
input	dispatched	`null \| number`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	forwarded	--
paste	forwarded	--

`NumberInputSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to hide the label text

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`OrderedList`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
nested	No	`let`	No	`boolean`	`false`	Set to `true` to use the nested variant
native	No	`let`	No	`boolean`	`false`	Set to `true` to use native list styles
expressive	No	`let`	No	`boolean`	`false`	Set to `true` to use Carbon's expressive typesetting

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`OutboundLink`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`OverflowMenu`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
menuRef	No	`let`	Yes	`null \| HTMLUListElement`	`null`	Obtain a reference to the overflow menu element
buttonRef	No	`let`	Yes	`null \| HTMLButtonElement`	`null`	Obtain a reference to the trigger button element
icon	No	`let`	Yes	`any`	`undefined`	Specify the icon to render. Defaults to `<OverflowMenuVertical />`
open	No	`let`	Yes	`boolean`	`false`	Set to `true` to open the menu
size	No	`let`	No	`"sm" \| "xl"`	`undefined`	Specify the size of the overflow menu
direction	No	`let`	No	`"top" \| "bottom"`	`"bottom"`	Specify the direction of the overflow menu relative to the button
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
flipped	No	`let`	No	`boolean`	`false`	Set to `true` to flip the menu relative to the button
menuOptionsClass	No	`let`	No	`string`	`undefined`	Specify the menu options class
iconClass	No	`let`	No	`string`	`undefined`	Specify the icon class
iconDescription	No	`let`	No	`string`	`"Open and close list of options"`	Specify the ARIA label for the icon
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the button element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
menu	No	--	`<svelte:component this={icon} aria-label={iconDescription} title={iconDescription} class="bx--overflow-menu__icon {iconClass}" />`

Events

Event name	Type	Detail
close	dispatched	`null \| { index: number; text: string; }`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--

`OverflowMenuItem`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLAnchorElement \| HTMLButtonElement`	`null`	Obtain a reference to the HTML element
primaryFocus	No	`let`	Yes	`boolean`	`false`	Set to `true` if the item should be focused when opening the menu
text	No	`let`	No	`string`	`"Provide text"`	Specify the item text. Alternatively, use the default slot
href	No	`let`	No	`string`	`""`	Specify the `href` attribute if the item is a link
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the item
hasDivider	No	`let`	No	`boolean`	`false`	Set to `true` to include a divider
danger	No	`let`	No	`boolean`	`false`	Set to `true` to use the danger variant
requireTitle	No	`let`	No	`boolean`	`true`	Set to `false` to omit the button `title` attribute
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	`<div class:bx--overflow-menu-options__option-content={true}> {text} </div>`

Events

Event name	Type	Detail
click	forwarded	--
keydown	forwarded	--

`Pagination`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
pageSize	No	`let`	Yes	`number`	`10`	Specify the number of items to display in a page
page	No	`let`	Yes	`number`	`1`	Specify the current page index
totalItems	No	`let`	No	`number`	`0`	Specify the total number of items
pageWindow	No	`let`	No	`number`	`1000`	If `totalItems` is a large number, it can affect the rendering performance of this component since its value is used to calculate the number of pages in the native select dropdown. This value creates a small window of pages rendered around the current page. By default, a maximum of 1000 select items are rendered.
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the pagination
forwardText	No	`let`	No	`string`	`"Next page"`	Specify the forward button text
backwardText	No	`let`	No	`string`	`"Previous page"`	Specify the backward button text
itemsPerPageText	No	`let`	No	`string`	`"Items per page:"`	Specify the items per page text
itemText	No	`let`	No	`(min: number, max: number) => string`	(min, max) => `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}`	Override the item text
itemRangeText	No	`let`	No	`(min: number, max: number, total: number) => string`	(min, max, total) => `${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}`	Override the item range text
pageInputDisabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the page input
pageSizeInputDisabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the page size input
pageSizes	No	`let`	No	`ReadonlyArray`	`[10]`	Specify the available page sizes
pagesUnknown	No	`let`	No	`boolean`	`false`	Set to `true` if the number of pages is unknown
pageText	No	`let`	No	`(page: number) => string`	(page) => `page ${page.toLocaleString()}`	Override the page text
pageRangeText	No	`let`	No	`(current: number, total: number) => string`	(current, total) => `of ${total.toLocaleString()} page${total === 1 ? "" : "s"}`	Override the page range text
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the top-level element

Slots

None.

Events

Event name	Type	Detail
change	dispatched	`{ page?: number; pageSize?: number }`
click:button--previous	dispatched	`{ page: number; }`
click:button--next	dispatched	`{ page: number; }`
update	dispatched	`{ pageSize: number; page: number; }`

`PaginationNav`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
page	No	`let`	Yes	`number`	`1`	Specify the current page index
total	No	`let`	No	`number`	`10`	Specify the total number of pages
shown	No	`let`	No	`number`	`10`	Specify the total number of pages to show
loop	No	`let`	No	`boolean`	`false`	Set to `true` to loop the navigation
forwardText	No	`let`	No	`string`	`"Next page"`	Specify the forward button text
backwardText	No	`let`	No	`string`	`"Previous page"`	Specify the backward button text
tooltipPosition	No	`let`	No	`"top" \| "right" \| "bottom" \| "left" \| "outside" \| "inside"`	`"bottom"`	Set the position of the tooltip relative to the pagination buttons.

Slots

None.

Events

Event name	Type	Detail
change	dispatched	`{ page: number; }`
click:button--previous	dispatched	`{ page: number; }`
click:button--next	dispatched	`{ page: number; }`

`PaginationSkeleton`

Props

None.

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`PasswordInput`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
type	No	`let`	Yes	`"text" \| "password"`	`"password"`	Set to `"text"` to toggle the password visibility
value	No	`let`	Yes	`number \| string`	`""`	Specify the input value
size	No	`let`	No	`"sm" \| "xl"`	`undefined`	Set the size of the input
placeholder	No	`let`	No	`string`	`""`	Specify the placeholder text
hidePasswordLabel	No	`let`	No	`string`	`"Hide password"`	Specify the hide password label text
showPasswordLabel	No	`let`	No	`string`	`"Show password"`	Specify the show password label text
tooltipAlignment	No	`let`	No	`"start" \| "center" \| "end"`	`"center"`	Set the alignment of the tooltip relative to the icon
tooltipPosition	No	`let`	No	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Set the position of the tooltip relative to the icon
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the input
helperText	No	`let`	No	`string`	`""`	Specify the helper text
labelText	No	`let`	No	`string`	`""`	Specify the label text
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
invalidText	No	`let`	No	`string`	`""`	Specify the text for the invalid state
warn	No	`let`	No	`boolean`	`false`	Set to `true` to indicate a warning state
warnText	No	`let`	No	`string`	`""`	Specify the warning state text
inline	No	`let`	No	`boolean`	`false`	Set to `true` to use inline version
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input element
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the input

Slots

Slot name	Default	Props	Fallback
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
input	forwarded	--
keydown	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	forwarded	--
paste	forwarded	--

`Popover`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
open	No	`let`	Yes	`boolean`	`false`	Set to `true` to display the popover
closeOnOutsideClick	No	`let`	No	`boolean`	`false`	Set to `true` to close the popover on an outside click
caret	No	`let`	No	`boolean`	`false`	Set to `true` render a caret
align	No	`let`	No	`"top" \| "top-left" \| "top-right" \| "bottom" \| "bottom-left" \| "bottom-right" \| "left" \| "left-bottom" \| "left-top" \| "right" \| "right-bottom" \| "right-top"`	`"top"`	Specify the alignment of the caret
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
highContrast	No	`let`	No	`boolean`	`false`	Set to `true` to enable the high contrast variant
relative	No	`let`	No	`boolean`	`false`	Set to `true` to use a relative position

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click:outside	dispatched	`{ target: HTMLElement; }`

`ProgressBar`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
value	No	`let`	No	`number`	`undefined`	Specify the current value
max	No	`let`	No	`number`	`100`	Specify the maximum value
kind	No	`let`	No	`"default" \| "inline" \| "indented"`	`"default"`	Specify the kind of progress bar
status	No	`let`	No	`"active" \| "finished" \| "error"`	`"active"`	Specify the status
size	No	`let`	No	`"sm" \| "md"`	`"md"`	Specify the size
labelText	No	`let`	No	`string`	`""`	Specify the label text
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
helperText	No	`let`	No	`string`	`""`	Specify the helper text
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the progress bar element

Slots

Slot name	Default	Props	Fallback
labelText	No	--	`{labelText}`

Events

None.

`ProgressIndicator`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
currentIndex	No	`let`	Yes	`number`	`0`	Specify the current step index
vertical	No	`let`	No	`boolean`	`false`	Set to `true` to use the vertical variant
spaceEqually	No	`let`	No	`boolean`	`false`	Set to `true` to specify whether the progress steps should be split equally in size in the div
preventChangeOnClick	No	`let`	No	`boolean`	`false`	Set to `true` to prevent `currentIndex` from updating

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
change	dispatched	`number`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`ProgressIndicatorSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
vertical	No	`let`	No	`boolean`	`false`	Set to `true` to use the vertical variant
count	No	`let`	No	`number`	`4`	Specify the number of steps to render

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`ProgressStep`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
current	No	`let`	Yes	`boolean`	`false`	Set to `true` to use the current variant
complete	No	`let`	Yes	`boolean`	`false`	Set to `true` for the complete variant
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the progress step
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
description	No	`let`	No	`string`	`""`	Specify the step description
label	No	`let`	No	`string`	`""`	Specify the step label
secondaryLabel	No	`let`	No	`string`	`""`	Specify the step secondary label
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	`{ props: { class: "bx--progress-label" } }`	`<p class:bx--progress-label={true}>{label}</p>`

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--

`RadioButton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
checked	No	`let`	Yes	`boolean`	`false`	Set to `true` to check the radio button
value	No	`let`	No	`string \| number`	`""`	Specify the value of the radio button
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the radio button
required	No	`let`	No	`boolean`	`false`	Set to `true` to mark the field as required
labelPosition	No	`let`	No	`"right" \| "left"`	`"right"`	Specify the label position
labelText	No	`let`	No	`string`	`""`	Specify the label text
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input element
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the radio button input

Slots

Slot name	Default	Props	Fallback
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
focus	forwarded	--
blur	forwarded	--
change	forwarded	--

`RadioButtonGroup`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
selected	No	`let`	Yes	`string \| number`	`undefined`	Set the selected radio button value
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the radio buttons
required	No	`let`	No	`boolean`	`undefined`	Set to `true` to require the selection of a radio button
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the radio button inputs
legendText	No	`let`	No	`string`	`""`	Specify the legend text
hideLegend	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the legend
helperText	No	`let`	No	`string`	`""`	Specify the helper text
labelPosition	No	`let`	No	`"right" \| "left"`	`"right"`	Specify the label position
orientation	No	`let`	No	`"horizontal" \| "vertical"`	`"horizontal"`	Specify the orientation of the radio buttons
id	No	`let`	No	`string`	`undefined`	Set an id for the container div element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
legendText	No	--	`{legendText}`

Events

Event name	Type	Detail
change	dispatched	`string \| number`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`RadioButtonSkeleton`

Props

None.

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`RadioTile`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
checked	No	`let`	Yes	`boolean`	`false`	Set to `true` to check the tile
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the tile
required	No	`let`	No	`boolean`	`false`	Set to `true` to mark the field as required
value	No	`let`	No	`string`	`""`	Specify the value of the radio input
tabindex	No	`let`	No	`string`	`"0"`	Specify the tabindex
iconDescription	No	`let`	No	`string`	`"Tile checkmark"`	Specify the ARIA label for the radio tile checkmark icon
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input element
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the radio tile input

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
change	forwarded	--
keydown	forwarded	--
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`RecursiveList`

Types

export interface RecursiveListNode {
  text?: string;
  href?: string;
  html?: string;
}

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
nodes	No	`let`	No	`Array<RecursiveListNode & { nodes?: RecursiveListNode[]; }>`	`[]`	Specify the nodes to render
type	No	`let`	No	`"unordered" \| "ordered" \| "ordered-native"`	`"unordered"`	Specify the type of list to render

Slots

None.

Events

None.

`Row`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
as	No	`let`	No	`boolean`	`false`	Set to `true` to render a custom HTML element Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>)
condensed	No	`let`	No	`boolean`	`false`	Set to `true` to use the condensed variant
narrow	No	`let`	No	`boolean`	`false`	Set to `true` to use the narrow variant
noGutter	No	`let`	No	`boolean`	`false`	Set to `true` to remove the gutter
noGutterLeft	No	`let`	No	`boolean`	`false`	Set to `true` to remove the left gutter
noGutterRight	No	`let`	No	`boolean`	`false`	Set to `true` to remove the right gutter
padding	No	`let`	No	`boolean`	`false`	Set to `true` to add top and bottom padding to all columns

Slots

Slot name	Default	Props	Fallback
--	Yes	`{ props: { class: string; [key: string]: any; } }`	--

Events

None.

`Search`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
expanded	No	`let`	Yes	`boolean`	`false`	Set to `true to expand the search input
value	No	`let`	Yes	`any`	`""`	Specify the value of the search input
size	No	`let`	No	`"sm" \| "lg" \| "xl"`	`"xl"`	Specify the size of the search input
searchClass	No	`let`	No	`string`	`""`	Specify the class name passed to the outer div element
skeleton	No	`let`	No	`boolean`	`false`	Set to `true` to display the skeleton state
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the search input
expandable	No	`let`	No	`boolean`	`false`	Set to `true` to enable the expandable variant
placeholder	No	`let`	No	`string`	`"Search..."`	Specify the `placeholder` attribute of the search input
autocomplete	No	`let`	No	`"on" \| "off"`	`"off"`	Specify the `autocomplete` attribute
autofocus	No	`let`	No	`boolean`	`false`	Set to `true` to auto focus the search element
closeButtonLabelText	No	`let`	No	`string`	`"Clear search input"`	Specify the close button label text
labelText	No	`let`	No	`string`	`""`	Specify the label text
icon	No	`let`	No	`any`	`undefined`	Specify the icon to render. Defaults to `<Search />`
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input element

Slots

Slot name	Default	Props	Fallback
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
expand	dispatched	`null`
collapse	dispatched	`null`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
input	forwarded	--
focus	forwarded	--
blur	forwarded	--
keydown	forwarded	--
keyup	forwarded	--
paste	forwarded	--
clear	dispatched	`null`

`SearchSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
size	No	`let`	No	`"sm" \| "lg" \| "xl"`	`"xl"`	Specify the size of the search input

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Select`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLSelectElement`	`null`	Obtain a reference to the select HTML element
selected	No	`let`	Yes	`string \| number`	`undefined`	Specify the selected item value
size	No	`let`	No	`"sm" \| "xl"`	`undefined`	Set the size of the select input
inline	No	`let`	No	`boolean`	`false`	Set to `true` to use the inline variant
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the select element
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the select element
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the select element
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
invalidText	No	`let`	No	`string`	`""`	Specify the invalid state text
warn	No	`let`	No	`boolean`	`false`	Set to `true` to indicate a warning state
warnText	No	`let`	No	`string`	`""`	Specify the warning state text
helperText	No	`let`	No	`string`	`""`	Specify the helper text
noLabel	No	`let`	No	`boolean`	`false`	Set to `true` to not render a label
labelText	No	`let`	No	`string`	`""`	Specify the label text
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
required	No	`let`	No	`boolean`	`false`	Set to `true` to mark the field as required

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
update	dispatched	`string \| number`
change	forwarded	--
input	forwarded	--
focus	forwarded	--
blur	forwarded	--

`SelectItem`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
value	No	`let`	No	`string \| number`	`""`	Specify the option value
text	No	`let`	No	`string`	`undefined`	Specify the option text If not specified, the value will be used as the text.
hidden	No	`let`	No	`boolean`	`false`	Set to `true` to hide the option
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the option
class	No	`let`	No	`string`	`undefined`	Specify the class of the `option` element
style	No	`let`	No	`string`	`undefined`	Specify the style of the `option` element

Slots

None.

Events

None.

`SelectItemGroup`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the optgroup element
label	No	`let`	No	`string`	`"Provide label"`	Specify the label attribute of the optgroup element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`SelectSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to hide the label text

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`SelectableTile`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
selected	No	`let`	Yes	`boolean`	`false`	Set to `true` to select the tile
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the tile
title	No	`let`	No	`string`	`"title"`	Specify the title of the selectable tile
value	No	`let`	No	`string`	`"value"`	Specify the value of the selectable tile
tabindex	No	`let`	No	`string`	`"0"`	Specify the tabindex
iconDescription	No	`let`	No	`string`	`"Tile checkmark"`	Specify the ARIA label for the selectable tile checkmark icon
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input element
name	No	`let`	No	`string`	`""`	Specify a name attribute for the input

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
select	dispatched	`string`
deselect	dispatched	`string`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--

`SideNav`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
isOpen	No	`let`	Yes	`boolean`	`false`	Set to `true` to toggle the expanded state
fixed	No	`let`	No	`boolean`	`false`	Set to `true` to use the fixed variant
rail	No	`let`	No	`boolean`	`false`	Set to `true` to use the rail variant
ariaLabel	No	`let`	No	`string`	`undefined`	Specify the ARIA label for the nav
expansionBreakpoint	No	`let`	No	`number`	`1056`	The window width (px) at which the SideNav is expanded and the hamburger menu is hidden. 1056 represents the "large" breakpoint in pixels from the Carbon Design System: - small: 320 - medium: 672 - large: 1056 - x-large: 1312 - max: 1584

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
open	dispatched	`null`
close	dispatched	`null`
click:overlay	dispatched	`null`

`SideNavDivider`

Props

None.

Slots

None.

Events

None.

`SideNavItems`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`SideNavLink`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLAnchorElement`	`null`	Obtain a reference to the HTML anchor element
isSelected	No	`let`	No	`boolean`	`false`	Set to `true` to select the current link
href	No	`let`	No	`string`	`undefined`	Specify the `href` attribute
text	No	`let`	No	`string`	`undefined`	Specify the text
icon	No	`let`	No	`any`	`undefined`	Specify the icon to render

Slots

Slot name	Default	Props	Fallback
--	Yes	--	`{text}`
icon	No	--	`<svelte:component this={icon} />`

Events

Event name	Type	Detail
click	forwarded	--

`SideNavMenu`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLButtonElement`	`null`	Obtain a reference to the HTML button element
expanded	No	`let`	Yes	`boolean`	`false`	Set to `true` to toggle the expanded state
text	No	`let`	No	`string`	`undefined`	Specify the text
icon	No	`let`	No	`any`	`undefined`	Specify the icon to render

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
icon	No	--	`<svelte:component this={icon} />`

Events

Event name	Type	Detail
click	forwarded	--

`SideNavMenuItem`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLAnchorElement`	`null`	Obtain a reference to the HTML anchor element
isSelected	No	`let`	No	`boolean`	`false`	Set to `true` to select the item
href	No	`let`	No	`string`	`undefined`	Specify the `href` attribute
text	No	`let`	No	`string`	`undefined`	Specify the item text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	`{text}`

Events

Event name	Type	Detail
click	forwarded	--

`SkeletonPlaceholder`

Props

None.

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`SkeletonText`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
lines	No	`let`	No	`number`	`3`	Specify the number of lines to render
heading	No	`let`	No	`boolean`	`false`	Set to `true` to use the heading size variant
paragraph	No	`let`	No	`boolean`	`false`	Set to `true` to use the paragraph size variant
width	No	`let`	No	`string`	`"100%"`	Specify the width of the text (% or px)

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`SkipToContent`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
href	No	`let`	No	`string`	`"#main-content"`	Specify the `href` attribute
tabindex	No	`let`	No	`string`	`"0"`	Specify the tabindex

Slots

Slot name	Default	Props	Fallback
--	Yes	--	`Skip to main content`

Events

Event name	Type	Detail
click	forwarded	--

`Slider`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLDivElement`	`null`	Obtain a reference to the HTML element
value	No	`let`	Yes	`number`	`0`	Specify the value of the slider
max	No	`let`	No	`number`	`100`	Set the maximum slider value
maxLabel	No	`let`	No	`string`	`""`	Specify the label for the max value
min	No	`let`	No	`number`	`0`	Set the minimum slider value
minLabel	No	`let`	No	`string`	`""`	Specify the label for the min value
step	No	`let`	No	`number`	`1`	Set the step value
stepMultiplier	No	`let`	No	`number`	`4`	Set the step multiplier value
required	No	`let`	No	`boolean`	`false`	Set to `true` to require a value
inputType	No	`let`	No	`string`	`"number"`	Specify the input type
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the slider
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
hideTextInput	No	`let`	No	`boolean`	`false`	Set to `true` to hide the text input
fullWidth	No	`let`	No	`boolean`	`false`	Set to `true` for the slider to span the full width of its containing element.
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the slider div element
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
labelText	No	`let`	No	`string`	`""`	Specify the label text. Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`)
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
name	No	`let`	No	`string`	`""`	Set a name for the slider element

Slots

Slot name	Default	Props	Fallback
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
change	dispatched	`number`
input	dispatched	`number`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`SliderSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to hide the label text

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`StructuredList`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
selected	No	`let`	Yes	`string`	`undefined`	Specify the selected structured list row value
condensed	No	`let`	No	`boolean`	`false`	Set to `true` to use the condensed variant
flush	No	`let`	No	`boolean`	`false`	Set to `true` to flush the list
selection	No	`let`	No	`boolean`	`false`	Set to `true` to use the selection variant

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
change	dispatched	`string`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`StructuredListBody`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`StructuredListCell`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
head	No	`let`	No	`boolean`	`false`	Set to `true` to use as a header
noWrap	No	`let`	No	`boolean`	`false`	Set to `true` to prevent wrapping

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`StructuredListHead`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`StructuredListInput`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
checked	No	`let`	Yes	`boolean`	`false`	Set to `true` to check the input
title	No	`let`	No	`string`	`"title"`	Specify the title of the input
value	No	`let`	No	`string`	`"value"`	Specify the value of the input
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input element
name	No	`let`	No	`string`	`""`	Specify a name attribute for the input

Slots

None.

Events

None.

`StructuredListRow`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
head	No	`let`	No	`boolean`	`false`	Set to `true` to use as a header
label	No	`let`	No	`boolean`	`false`	Set to `true` to render a label slot
tabindex	No	`let`	No	`string`	`"0"`	Specify the tabindex

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--

`StructuredListSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
rows	No	`let`	No	`number`	`5`	Specify the number of rows

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Switch`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLButtonElement`	`null`	Obtain a reference to the button HTML element
selected	No	`let`	Yes	`boolean`	`false`	Set to `true` for the switch to be selected
text	No	`let`	No	`string`	`"Provide text"`	Specify the switch text. Alternatively, use the "text" slot (e.g., `<span slot="text">...</span>`)
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the switch
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the button element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	`{text}`

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--

`Tab`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLAnchorElement`	`null`	Obtain a reference to the anchor HTML element
label	No	`let`	No	`string`	`""`	Specify the tab label. Alternatively, use the default slot (e.g., `<Tab><span>Label</span></Tab>`)
href	No	`let`	No	`string`	`"#"`	Specify the href attribute
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the tab
tabindex	No	`let`	No	`string`	`"0"`	Specify the tabindex
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	`{label}`

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`TabContent`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`Table`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
size	No	`let`	No	`"compact" \| "short" \| "medium" \| "tall"`	`undefined`	Set the size of the table
zebra	No	`let`	No	`boolean`	`false`	Set to `true` to use zebra styles
useStaticWidth	No	`let`	No	`boolean`	`false`	Set to `true` to use static width
sortable	No	`let`	No	`boolean`	`false`	Set to `true` for the sortable variant
stickyHeader	No	`let`	No	`boolean`	`false`	Set to `true` to enable a sticky header
tableStyle	No	`let`	No	`string`	`undefined`	Set the style attribute on the `table` element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`TableBody`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`TableCell`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`TableContainer`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
title	No	`let`	No	`string`	`""`	Specify the title of the data table
description	No	`let`	No	`string`	`""`	Specify the description of the data table
stickyHeader	No	`let`	No	`boolean`	`false`	Set to `true` to enable a sticky header
useStaticWidth	No	`let`	No	`boolean`	`false`	Set to `true` to use static width

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`TableHead`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`TableHeader`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
sortable	No	`let`	No	`boolean`	`false`	Set to `true` for the sortable variant
sortDirection	No	`let`	No	`"none" \| "ascending" \| "descending"`	`"none"`	Specify the sort direction
active	No	`let`	No	`boolean`	`false`	Set to `true` if the column sorting
scope	No	`let`	No	`string`	`"col"`	Specify the `scope` attribute
translateWithId	No	`let`	No	`() => string`	`() => ""`	Override the default id translations
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
click	forwarded	--

`TableRow`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Tabs`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
selected	No	`let`	Yes	`number`	`0`	Specify the selected tab index
type	No	`let`	No	`"default" \| "container"`	`"default"`	Specify the type of tabs
autoWidth	No	`let`	No	`boolean`	`false`	Set to `true` for tabs to have an auto-width
iconDescription	No	`let`	No	`string`	`"Show menu options"`	Specify the ARIA label for the chevron icon
triggerHref	No	`let`	No	`string`	`"#"`	Specify the tab trigger href attribute

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
content	No	--	--

Events

Event name	Type	Detail
change	dispatched	`number`
keypress	forwarded	--
click	forwarded	--

`TabsSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
count	No	`let`	No	`number`	`4`	Specify the number of tabs to render
type	No	`let`	No	`"default" \| "container"`	`"default"`	Specify the type of tabs

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Tag`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
type	No	`let`	No	`"red" \| "magenta" \| "purple" \| "blue" \| "cyan" \| "teal" \| "green" \| "gray" \| "cool-gray" \| "warm-gray" \| "high-contrast" \| "outline"`	`undefined`	Specify the type of tag
size	No	`let`	No	`"sm" \| "default"`	`"default"`	--
filter	No	`let`	No	`boolean`	`false`	Set to `true` to use filterable variant
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable a filterable tag
interactive	No	`let`	No	`boolean`	`false`	Set to `true` to render a `button` element instead of a `div`
skeleton	No	`let`	No	`boolean`	`false`	Set to `true` to display the skeleton state
title	No	`let`	No	`string`	`"Clear filter"`	Set the title for the close button in a filterable tag
icon	No	`let`	No	`any`	`undefined`	Specify the icon to render
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the filterable tag

Slots

Slot name	Default	Props	Fallback
--	Yes	`{ props: { class: "bx--tag__label" } }`	--
icon	No	--	`<svelte:component this={icon} />`

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
close	dispatched	`null`

`TagSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
size	No	`let`	No	`"sm" \| "default"`	`"default"`	--

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`TextArea`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLTextAreaElement`	`null`	Obtain a reference to the textarea HTML element
value	No	`let`	Yes	`null \| string`	`""`	Specify the textarea value.
placeholder	No	`let`	No	`string`	`""`	Specify the placeholder text
cols	No	`let`	No	`number`	`undefined`	Specify the number of cols. If specified, the textarea will not be resizable. Override this using the `resize` style attribute.
rows	No	`let`	No	`number`	`4`	Specify the number of rows
maxCount	No	`let`	No	`number`	`undefined`	Specify the max character count
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the input
readonly	No	`let`	No	`boolean`	`false`	Set to `true` to use the read-only variant
helperText	No	`let`	No	`string`	`""`	Specify the helper text
labelText	No	`let`	No	`string`	`""`	Specify the label text
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
invalidText	No	`let`	No	`string`	`""`	Specify the text for the invalid state
warn	No	`let`	No	`boolean`	`false`	Set to `true` to indicate a warning state
warnText	No	`let`	No	`string`	`""`	Specify the warning state text
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the textarea element
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the input

Slots

Slot name	Default	Props	Fallback
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
input	forwarded	--
keydown	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	forwarded	--
paste	forwarded	--

`TextAreaSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`TextInput`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
value	No	`let`	Yes	`null \| number \| string`	`""`	Specify the input value. `value` will be set to `null` if type="number" and the value is empty.
size	No	`let`	No	`"sm" \| "xl"`	`undefined`	Set the size of the input
placeholder	No	`let`	No	`string`	`""`	Specify the placeholder text
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the input
helperText	No	`let`	No	`string`	`""`	Specify the helper text
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input element
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the input
labelText	No	`let`	No	`string`	`""`	Specify the label text
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
invalidText	No	`let`	No	`string`	`""`	Specify the invalid state text
warn	No	`let`	No	`boolean`	`false`	Set to `true` to indicate a warning state
warnText	No	`let`	No	`string`	`""`	Specify the warning state text
required	No	`let`	No	`boolean`	`false`	Set to `true` to mark the field as required
inline	No	`let`	No	`boolean`	`false`	Set to `true` to use the inline variant
readonly	No	`let`	No	`boolean`	`false`	Set to `true` to use the read-only variant

Slots

Slot name	Default	Props	Fallback
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
change	dispatched	`null \| number \| string`
input	dispatched	`null \| number \| string`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	forwarded	--
paste	forwarded	--

`TextInputSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to hide the label text

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Theme`

Types

export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
theme	No	`let`	Yes	`CarbonTheme`	`"white"`	Set the current Carbon theme
tokens	No	`let`	No	`{ [token: string]: any; }`	`{}`	Customize a theme with your own tokens @see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme
persist	No	`let`	No	`boolean`	`false`	Set to `true` to persist the theme using window.localStorage
persistKey	No	`let`	No	`string`	`"theme"`	Specify the local storage key
render	No	`let`	No	`"toggle" \| "select"`	`undefined`	Render a toggle or select dropdown to control the theme
toggle	No	`let`	No	`import("../Toggle/Toggle.svelte").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }`	`{ themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }`	Override the default toggle props
select	No	`let`	No	`import("../Select/Select.svelte").SelectProps & { themes?: CarbonTheme[]; }`	`{ themes: themeKeys, labelText: "Themes", hideLabel: false, }`	Override the default select props

Slots

Slot name	Default	Props	Fallback
--	Yes	`{ theme: CarbonTheme; }`	--

Events

Event name	Type	Detail
update	dispatched	`{ theme: CarbonTheme; }`

`Tile`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`TileGroup`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
selected	No	`let`	Yes	`string`	`undefined`	Specify the selected tile value
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the tile group
required	No	`let`	No	`boolean`	`undefined`	Set to `true` to require the selection of a radio button
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the radio button inputs
legend	No	`let`	No	`string`	`""`	Specify the legend text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
select	dispatched	`string`

`TimePicker`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
value	No	`let`	Yes	`string`	`""`	Specify the input value
size	No	`let`	No	`"sm" \| "xl"`	`undefined`	Specify the size of the input
placeholder	No	`let`	No	`string`	`"hh:mm"`	Specify the input placeholder text
pattern	No	`let`	No	`string`	`"(1[012]\|[1-9]):[0-5]0-9?"`	Specify the `pattern` attribute for the input element
maxlength	No	`let`	No	`number`	`5`	Specify the `maxlength` input attribute
light	No	`let`	No	`boolean`	`false`	Set to `true` to enable the light variant
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the input
labelText	No	`let`	No	`string`	`""`	Specify the label text
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
invalid	No	`let`	No	`boolean`	`false`	Set to `true` to indicate an invalid state
invalidText	No	`let`	No	`string`	`""`	Specify the invalid state text
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input element
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the input

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
input	forwarded	--
keydown	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	forwarded	--
paste	forwarded	--

`TimePickerSelect`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLSelectElement`	`null`	Obtain a reference to the select HTML element
value	No	`let`	Yes	`number \| string`	`""`	Specify the select value
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the select
iconDescription	No	`let`	No	`string`	`"Open list of options"`	Specify the ARIA label for the chevron icon
labelText	No	`let`	No	`string`	`""`	Specify the label text
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the select element
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the select element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`ToastNotification`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
kind	No	`let`	No	`"error" \| "info" \| "info-square" \| "success" \| "warning" \| "warning-alt"`	`"error"`	Specify the kind of notification
lowContrast	No	`let`	No	`boolean`	`false`	Set to `true` to use the low contrast variant
timeout	No	`let`	No	`number`	`0`	Set the timeout duration (ms) to hide the notification after opening it
role	No	`let`	No	`string`	`"alert"`	Set the `role` attribute
title	No	`let`	No	`string`	`""`	Specify the title text
subtitle	No	`let`	No	`string`	`""`	Specify the subtitle text
caption	No	`let`	No	`string`	`""`	Specify the caption text
statusIconDescription	No	`let`	No	`string`	`kind + " icon"`	Specify the ARIA label for the status icon
closeButtonDescription	No	`let`	No	`string`	`"Close notification"`	Specify the ARIA label for the close button
hideCloseButton	No	`let`	No	`boolean`	`false`	Set to `true` to hide the close button
fullWidth	No	`let`	No	`boolean`	`false`	Set to `true` for the notification to span the full width of its containing element.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
caption	No	--	`{caption}`
subtitle	No	--	`{subtitle}`
title	No	--	`{title}`

Events

Event name	Type	Detail
close	dispatched	`{ timeout: boolean }`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Toggle`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
toggled	No	`let`	Yes	`boolean`	`false`	Set to `true` to toggle the checkbox input
size	No	`let`	No	`"default" \| "sm"`	`"default"`	Specify the toggle size
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable checkbox input
labelA	No	`let`	No	`string`	`"Off"`	Specify the label for the untoggled state
labelB	No	`let`	No	`string`	`"On"`	Specify the label for the toggled state
labelText	No	`let`	No	`string`	`""`	Specify the label text
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input element
name	No	`let`	No	`string`	`undefined`	Specify a name attribute for the checkbox input

Slots

Slot name	Default	Props	Fallback
labelA	No	--	`{labelA}`
labelB	No	--	`{labelB}`
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
toggle	dispatched	`{ toggled: boolean; }`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	forwarded	--

`ToggleSkeleton`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
size	No	`let`	No	`"default" \| "sm"`	`"default"`	Specify the toggle size
labelText	No	`let`	No	`string`	`""`	Specify the label text
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the input element

Slots

Slot name	Default	Props	Fallback
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

`Toolbar`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
size	No	`let`	No	`"sm" \| "default"`	`"default"`	Specify the toolbar size

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`ToolbarBatchActions`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
active	No	`let`	Yes	`undefined \| boolean`	`undefined`	Use a boolean to show or hide the toolbar
formatTotalSelected	No	`let`	No	`(totalSelected: number) => string`	(totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`	Override the total items selected text
selectedIds	No	`let`	No	`ReadonlyArray`	`[]`	Specify the selected IDs for standalone usage. This is unnecessary if using this component with `DataTable`.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
cancel	No	--	`Cancel`

Events

Event name	Type	Detail
cancel	dispatched	`null`

`ToolbarContent`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`ToolbarMenu`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`ToolbarMenuItem`

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
keydown	forwarded	--

`ToolbarSearch`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLInputElement`	`null`	Obtain a reference to the input HTML element
filteredRowIds	No	`let`	Yes	`ReadonlyArray<import("./DataTable.svelte").DataTableRowId>`	`[]`	The filtered row ids
expanded	No	`let`	Yes	`boolean`	`false`	Set to `true` to expand the search bar
value	No	`let`	Yes	`number \| string`	`""`	Specify the value of the search input
persistent	No	`let`	No	`boolean`	`false`	Set to `true` to keep the search bar expanded
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the search bar
shouldFilterRows	No	`let`	No	`boolean \| ((row: import("./DataTable.svelte").DataTableRow, value: number \| string) => boolean)`	`false`	Set to `true` to filter table rows using the search value. If `true`, the default search excludes `id`, `cells` fields and only does a basic comparison on string and number type cell values. To implement your own client-side filtering, pass a function that accepts a row and value and returns a boolean.
tabindex	No	`let`	No	`string`	`"0"`	Specify the tabindex

Slots

None.

Events

Event name	Type	Detail
clear	dispatched	`null`
change	forwarded	--
input	forwarded	--
focus	forwarded	--
blur	forwarded	--
keyup	forwarded	--
keydown	forwarded	--
paste	forwarded	--

`Tooltip`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
refIcon	No	`let`	Yes	`null \| HTMLDivElement`	`null`	Obtain a reference to the icon HTML element
refTooltip	No	`let`	Yes	`null \| HTMLDivElement`	`null`	Obtain a reference to the tooltip HTML element
ref	No	`let`	Yes	`null \| HTMLDivElement`	`null`	Obtain a reference to the trigger text HTML element
open	No	`let`	Yes	`boolean`	`false`	Set to `true` to open the tooltip
align	No	`let`	No	`"start" \| "center" \| "end"`	`"center"`	Set the alignment of the tooltip relative to the icon
direction	No	`let`	No	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Set the direction of the tooltip relative to the button
hideIcon	No	`let`	No	`boolean`	`false`	Set to `true` to hide the tooltip icon
icon	No	`let`	No	`any`	`undefined`	Specify the icon to render for the tooltip button. Default to `<Information />`
iconDescription	No	`let`	No	`string`	`""`	Specify the ARIA label for the tooltip button
iconName	No	`let`	No	`string`	`""`	Specify the icon name attribute
tabindex	No	`let`	No	`string`	`"0"`	Set the button tabindex
tooltipId	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the tooltip
triggerId	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the tooltip button
triggerText	No	`let`	No	`string`	`""`	Set the tooltip button text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
icon	No	--	`<svelte:component this={icon} name={iconName} />`
triggerText	No	--	`{triggerText}`

Events

Event name	Type	Detail
open	dispatched	`null`
close	dispatched	`null`
click	forwarded	--
mousedown	forwarded	--

`TooltipDefinition`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLButtonElement`	`null`	Obtain a reference to the button HTML element
open	No	`let`	Yes	`boolean`	`false`	Set to `true` to open the tooltip
tooltipText	No	`let`	No	`string`	`""`	Specify the tooltip text
align	No	`let`	No	`"start" \| "center" \| "end"`	`"center"`	Set the alignment of the tooltip relative to the icon
direction	No	`let`	No	`"top" \| "bottom"`	`"bottom"`	Set the direction of the tooltip relative to the icon
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the tooltip div element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
tooltip	No	--	`{tooltipText}`

Events

Event name	Type	Detail
open	dispatched	`null`
close	dispatched	`null`
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
focus	forwarded	--

`TooltipFooter`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
selectorPrimaryFocus	No	`let`	No	`string`	`"a[href], button:not([disabled])"`	Specify a selector to be focused inside the footer when opening the tooltip

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`TooltipIcon`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
ref	No	`let`	Yes	`null \| HTMLButtonElement`	`null`	Obtain a reference to the button HTML element
tooltipText	No	`let`	No	`string`	`""`	Specify the tooltip text. Alternatively, use the "tooltipText" slot
icon	No	`let`	No	`any`	`undefined`	Specify the icon to render
disabled	No	`let`	No	`boolean`	`false`	Set to `true` to disable the tooltip icon
align	No	`let`	No	`"start" \| "center" \| "end"`	`"center"`	Set the alignment of the tooltip relative to the icon
direction	No	`let`	No	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Set the direction of the tooltip relative to the icon
id	No	`let`	No	`string`	`"ccs-" + Math.random().toString(36)`	Set an id for the span element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	`<svelte:component this={icon} />`
tooltipText	No	--	`{tooltipText}`

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
focus	forwarded	--

`TreeView`

Types

export type TreeNodeId = string | number;

export interface TreeNode {
  id: TreeNodeId;
  text: any;
  icon?: any;
  disabled?: boolean;
  nodes?: TreeNode[];
}

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
expandedIds	No	`let`	Yes	`ReadonlyArray`	`[]`	Set the node ids to be expanded
selectedIds	No	`let`	Yes	`ReadonlyArray`	`[]`	Set the node ids to be selected
activeId	No	`let`	Yes	`TreeNodeId`	`""`	Set the current active node id Only one node can be active
nodes	No	`let`	No	`Array`	`[]`	Provide an array of nodes to render
size	No	`let`	No	`"default" \| "compact"`	`"default"`	Specify the TreeView size
labelText	No	`let`	No	`string`	`""`	Specify the label text
hideLabel	No	`let`	No	`boolean`	`false`	Set to `true` to visually hide the label text
expandAll	No	`function`	No	`() => void`	`() => { expandedIds = [...nodeIds]; }`	Programmatically expand all nodes
collapseAll	No	`function`	No	`() => void`	`() => { expandedIds = []; }`	Programmatically collapse all nodes
expandNodes	No	`function`	No	`(filterId?: (node: TreeNode) => boolean) => void`	`() => { expandedIds = flattenedNodes .filter( (node) => filterNode(node) \|\| node.nodes?.some((child) => filterNode(child) && child.nodes), ) .map((node) => node.id); }`	Programmatically expand a subset of nodes. Expands all nodes if no argument is provided
collapseNodes	No	`function`	No	`(filterId?: (node: TreeNode) => boolean) => void`	`() => { expandedIds = flattenedNodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); }`	Programmatically collapse a subset of nodes. Collapses all nodes if no argument is provided
showNode	No	`function`	No	`(id: TreeNodeId) => void`	() => { for (const child of nodes) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(`[id="${lastId}"]`)?.focus(); }); break; } } }	Programmatically show a node by `id`. The matching node will be expanded, selected, and focused

Slots

Slot name	Default	Props	Fallback
--	Yes	`{ node: { id: TreeNodeId; text: string; expanded: boolean, leaf: boolean; disabled: boolean; selected: boolean; } }`	`{node.text}`
labelText	No	--	`{labelText}`

Events

Event name	Type	Detail
select	dispatched	`TreeNode & { expanded: boolean; leaf: boolean; }`
toggle	dispatched	`TreeNode & { expanded: boolean; leaf: boolean; }`
focus	dispatched	`TreeNode & { expanded: boolean; leaf: boolean; }`
keydown	forwarded	--

`Truncate`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
clamp	No	`let`	No	`"end" \| "front"`	`"end"`	--

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

`UnorderedList`

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
nested	No	`let`	No	`boolean`	`false`	Set to `true` to use the nested variant
expressive	No	`let`	No	`boolean`	`false`	Set to `true` to use Carbon's expressive typesetting

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!