carbon-components-svelte/COMPONENT_INDEX.md

Component Index

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

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	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render
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
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; } }	--

Events

Event name	Type	Detail
click	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	--
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
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
indeterminate	No	let	No	boolean	false	Specify whether the checkbox is indeterminate
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
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	--
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	false	Set to true to enable the show more/less button
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>) You must use the code prop to copy the code
copy	No	let	No	(code: string) => void	async (code) => {

 try {
   await navigator.clipboard.writeText(code);
 } catch (e) {
   console.log(e);
 }

} | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | | 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 that type must be "multi" | | 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
type must be "multi" | | showMoreText | No | let | No | string | "Show more" | Specify the show more text
type must be "multi" | | 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
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 an 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
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)}

Events

Event name	Type	Detail
select	dispatched	{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }
keydown	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	forwarded	--
paste	forwarded	--
clear	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
transitionend	dispatched	{ open: boolean; }
keydown	forwarded	--
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
submit	dispatched	null
click:button--primary	dispatched	null
close	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	typeof import("svelte").SvelteComponent	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 = string;

export type DataTableValue = any;

export interface DataTableEmptyHeader {
  key: DataTableKey;
  empty: boolean;
  display?: (item: Value) => DataTableValue;
  sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
  columnMenu?: boolean;
  width?: string;
  minWidth?: string;
}

export interface DataTableNonEmptyHeader {
  key: DataTableKey;
  value: DataTableValue;
  display?: (item: Value) => DataTableValue;
  sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
  columnMenu?: boolean;
  width?: string;
  minWidth?: string;
}

export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;

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

export type DataTableRowId = any;

export interface DataTableCell {
  key: DataTableKey;
  value: DataTableValue;
  display?: (item: Value) => 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	[]	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
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: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }	{cell.display ? cell.display(cell.value) : cell.value}
cell-header	No	{ header: DataTableNonEmptyHeader; }	{header.value}
description	No	--	{description}
expanded-row	No	{ row: DataTableRow; }	--
title	No	--	{title}

Events

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

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 an 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 an 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 | | labelDescription | No | let | No | string | "" | Specify the label description | | labelTitle | No | let | No | string | "" | Specify the label title | | kind | No | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of 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

None.

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	"primary" | "secondary" | "tertiary" | "ghost" | "danger"	"primary"	Specify the kind of 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
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	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render for the closed state. Defaults to &lt;Menu size={20} /&gt;
iconClose	No	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render for the opened state. Defaults to &lt;Close size={20} /&gt;

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
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	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render when the action panel is closed. Defaults to <Switcher size={20} />
closeIcon	No	let	No	typeof import("svelte").SvelteComponent	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 Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)
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

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>{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	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render

Slots

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

Events

None.

HeaderGlobalAction

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
isActive	No	let	No	boolean	false	Set to true to use the active variant
icon	No	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render

Slots

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

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

None.

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>– {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 the ARIA label for the loading icon
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
iconDescription	No	let	No	string	"Closes notification"	Specify the ARIA label for the icon

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 | HTMLParagraphElement	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	typeof import("svelte").SvelteComponent	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 an 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	--

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	"Active loading indicator"	Specify the label description
id	No	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the label element

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	typeof import("svelte").SvelteComponent	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
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
close	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	typeof import("svelte").SvelteComponent	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	Yes	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; }	(item) => {}	Override the item name, title, labelText passed to the checkbox input
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) => string	(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 an 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)}

Events

Event name	Type	Detail
select	dispatched	{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }
clear	dispatched	null
blur	dispatched	FocusEvent | CustomEvent
keydown	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	typeof import("svelte").SvelteComponent	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	No	let	No	string	"Closes notification"	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
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 an 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	typeof import("svelte").SvelteComponent	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	{ 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 for a custom element
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
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}–${max} item${max === 1 ? "" : "s"}`	Override the item text
itemRangeText	No	let	No	(min: number, max: number, total: number) => string	(min, max, total) =>
`${min}–${max} of ${total} 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}`	Override the page text
pageRangeText	No	let	No	(current: number, total: number) => string	(current, total) =>
`of ${total} 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
update	dispatched	{ pageSize: number; page: number; }
click:button--previous	dispatched	{ page: number; }
click:button--next	dispatched	{ page: number; }

PaginationNav

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
page	No	let	Yes	number	0	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

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 an 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	null

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 of progress bar
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	""	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	""	Specify a name attribute for the radio button input

Slots

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

Events

Event name	Type	Detail
change	forwarded	--

RadioButtonGroup

Props

Prop name	Required	Kind	Reactive	Type	Default value	Description
selected	No	let	Yes	string	undefined	Set the selected radio button value
disabled	No	let	No	boolean	false	Set to true to disable the radio buttons
legendText	No	let	No	string	""	Specify the legend text
hideLegend	No	let	No	boolean	false	Set to true to visually hide the legend
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
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	dispatched	--

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
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	""	Specify a name attribute for the 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
children	No	let	No	Array<RecursiveListNode & { children?: RecursiveListNode[]; }>	[]	Specify the children 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	typeof import("svelte").SvelteComponent	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 an 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
change	dispatched	string | number
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	""	Specify the option 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

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
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	typeof import("svelte").SvelteComponent	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	typeof import("svelte").SvelteComponent	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
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
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	dispatched	--

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
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	dispatched	--

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
keypress	forwarded	--
click	forwarded	--
change	dispatched	--

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	typeof import("svelte").SvelteComponent	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	string	""	Specify the textarea value
placeholder	No	let	No	string	""	Specify the placeholder text
cols	No	let	No	number	50	Specify the number of cols
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
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 an 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").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").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
legend	No	let	No	string	""	Specify the legend text

Slots

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

Events

Event name	Type	Detail
select	dispatched	--

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
iconDescription	No	let	No	string	"Closes notification"	Specify the ARIA label for the icon
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
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

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	forwarded	--
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	typeof import("svelte").SvelteComponent	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	typeof import("svelte").SvelteComponent	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: string;
  icon?: typeof import("svelte").SvelteComponent;
  disabled?: boolean;
  expanded?: boolean;
}

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
children	No	let	No	Array<TreeNode & { children?: TreeNode[] }>	[]	Provide an array of children 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 = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .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 = nodes .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 |

Slots

Slot name	Default	Props	Fallback
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	--