carbon-components-svelte/COMPONENT_INDEX.md

Component Index

172 components exported from carbon-components-svelte@0.55.0.

Components

• Accordion
• AccordionItem
• AccordionSkeleton
• AspectRatio
• Breadcrumb
• BreadcrumbItem
• BreadcrumbSkeleton
• Breakpoint
• Button
• ButtonSet
• ButtonSkeleton
• Checkbox
• CheckboxSkeleton
• ClickableTile
• CodeSnippet
• CodeSnippetSkeleton
• Column
• ComboBox
• ComposedModal
• Content
• ContentSwitcher
• ContextMenu
• ContextMenuDivider
• ContextMenuGroup
• ContextMenuOption
• ContextMenuRadioGroup
• Copy
• CopyButton
• DataTable
• DataTableSkeleton
• DatePicker
• DatePickerInput
• DatePickerSkeleton
• Dropdown
• DropdownSkeleton
• ExpandableTile
• FileUploader
• FileUploaderButton
• FileUploaderDropContainer
• FileUploaderItem
• FileUploaderSkeleton
• Filename
• FluidForm
• Form
• FormGroup
• FormItem
• FormLabel
• Grid
• Header
• HeaderAction
• HeaderActionLink
• HeaderActionSearch
• HeaderGlobalAction
• HeaderNav
• HeaderNavItem
• HeaderNavMenu
• HeaderPanelDivider
• HeaderPanelLink
• HeaderPanelLinks
• HeaderSearch
• HeaderUtilities
• Icon
• IconSkeleton
• ImageLoader
• InlineLoading
• InlineNotification
• Link
• ListBox
• ListBoxField
• ListBoxMenu
• ListBoxMenuIcon
• ListBoxMenuItem
• ListBoxSelection
• ListItem
• Loading
• LocalStorage
• Modal
• ModalBody
• ModalFooter
• ModalHeader
• MultiSelect
• NotificationActionButton
• NotificationButton
• NotificationIcon
• NotificationTextDetails
• 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
• ToggleSmall
• ToggleSmallSkeleton
• Toolbar
• ToolbarBatchActions
• ToolbarContent
• ToolbarMenu
• ToolbarMenuItem
• ToolbarSearch
• Tooltip
• TooltipDefinition
• TooltipFooter
• TooltipIcon
• TreeView
• Truncate
• UnorderedList

---

Accordion

Props

Prop name	Kind	Reactive	Type	Default value	Description
align	let	No	"start" | "end"	"end"	Specify alignment of accordion item chevron icon
size	let	No	"sm" | "xl"	undefined	Specify the size of the accordion
disabled	let	No	boolean	false	Set to true to disable the accordion
skeleton	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	Kind	Reactive	Type	Default value	Description
disabled	let	Yes	boolean	false	Set to true to disable the accordion item
open	let	Yes	boolean	false	Set to true to open the first accordion item
title	let	No	string	"title"	Specify the title of the accordion item heading Alternatively, use the "title" slot (e.g., <div slot="title">...</div>)
iconDescription	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	Kind	Reactive	Type	Default value	Description
count	let	No	number	4	Specify the number of accordion items to render
align	let	No	"start" | "end"	"end"	Specify alignment of accordion item chevron icon
size	let	No	"sm" | "xl"	undefined	Specify the size of the accordion
open	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	Kind	Reactive	Type	Default value	Description
ratio	let	No	"2x1" | "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	Kind	Reactive	Type	Default value	Description
noTrailingSlash	let	No	boolean	false	Set to true to hide the breadcrumb trailing slash
skeleton	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	Kind	Reactive	Type	Default value	Description
href	let	No	string	undefined	Set the href to use an anchor link
isCurrentPage	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	Kind	Reactive	Type	Default value	Description
noTrailingSlash	let	No	boolean	false	Set to true to hide the breadcrumb trailing slash
count	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	Kind	Reactive	Type	Default value	Description
sizes	let	Yes	Record<BreakpointSize, boolean>	{ sm: false, md: false, lg: false, xlg: false, max: false, }	Carbon grid sizes as an object
size	let	Yes	BreakpointSize	undefined	Determine the current Carbon grid breakpoint size
breakpoints	const	No	Record<BreakpointSize, BreakpointValue>	{ sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, }	Reference the Carbon grid breakpoints

Slots

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

Events

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

Button

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement | HTMLButtonElement	null	Obtain a reference to the HTML element
hasIconOnly	let	Yes	boolean	false	Set to true for the icon-only variant
kind	let	No	"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"	"primary"	Specify the kind of button
size	let	No	"default" | "field" | "small" | "lg" | "xl"	"default"	Specify the size of button
expressive	let	No	boolean	false	Set to true to use Carbon's expressive typesetting
isSelected	let	No	boolean	false	Set to true to enable the selected state for an icon-only, ghost button
icon	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render
iconDescription	let	No	string	undefined	Specify the ARIA label for the button icon
tooltipAlignment	let	No	"start" | "center" | "end"	"center"	Set the alignment of the tooltip relative to the icon hasIconOnly must be set to true
tooltipPosition	let	No	"top" | "right" | "bottom" | "left"	"bottom"	Set the position of the tooltip relative to the icon
as	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	let	No	boolean	false	Set to true to display the skeleton state
disabled	let	No	boolean	false	Set to true to disable the button
href	let	No	string	undefined	Set the href to use an anchor link
tabindex	let	No	string	"0"	Specify the tabindex
type	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	Kind	Reactive	Type	Default value	Description
stacked	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	Kind	Reactive	Type	Default value	Description
href	let	No	string	undefined	Set the href to use an anchor link
size	let	No	"default" | "field" | "small" | "lg" | "xl"	"default"	Specify the size of button skeleton
small	let	No	boolean	false	--

Slots

None.

Events

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

Checkbox

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
group	let	Yes	any[]	[]	Specify the bound group
checked	let	Yes	boolean	false	Specify whether the checkbox is checked
value	let	No	any	""	Specify the value of the checkbox
indeterminate	let	No	boolean	false	Specify whether the checkbox is indeterminate
skeleton	let	No	boolean	false	Set to true to display the skeleton state
required	let	No	boolean	false	Set to true to mark the field as required
readonly	let	No	boolean	false	Set to true for the checkbox to be read-only
disabled	let	No	boolean	false	Set to true to disable the checkbox
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
name	let	No	string	""	Set a name for the input element
title	let	No	string	undefined	Specify the title attribute for the label element
id	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	Kind	Reactive	Type	Default value	Description
clicked	let	Yes	boolean	false	Set to true to click the tile
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the tile
href	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLPreElement	null	Obtain a reference to the pre HTML element
showMoreLess	let	Yes	boolean	false	Set to true to enable the show more/less button
expanded	let	Yes	boolean	false	Set to true to expand a multi-line code snippet (type="multi")
type	let	No	"single" | "inline" | "multi"	"single"	Set the type of code snippet
code	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	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	let	No	boolean	false	Set to true to hide the copy button
disabled	let	No	boolean	false	Set to true for the disabled variant Only applies to the "single", "multi" types
wrapText	let	No	boolean	false	Set to true to wrap the text Note that type must be "multi"
light	let	No	boolean	false	Set to true to enable the light variant
skeleton	let	No	boolean	false	Set to true to display the skeleton state
copyButtonDescription	let	No	string	undefined	Specify the ARIA label for the copy button icon
copyLabel	let	No	string	undefined	Specify the ARIA label of the copy button
feedback	let	No	string	"Copied!"	Specify the feedback text displayed when clicking the snippet
feedbackTimeout	let	No	number	2000	Set the timeout duration (ms) to display feedback text
showLessText	let	No	string	"Show less"	Specify the show less text type must be "multi"
showMoreText	let	No	string	"Show more"	Specify the show more text type must be "multi"
id	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
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
animationend	forwarded	--
copy	dispatched	--

CodeSnippetSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
type	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	Kind	Reactive	Type	Default value	Description
as	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	let	No	boolean	false	Set to true to remove the gutter
noGutterLeft	let	No	boolean	false	Set to true to remove the left gutter
noGutterRight	let	No	boolean	false	Set to true to remove the right gutter
padding	let	No	boolean	false	Set to true to add top and bottom padding to the column
aspectRatio	let	No	"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"	undefined	Specify the aspect ratio of the column
sm	let	No	ColumnBreakpoint	undefined	Set the small breakpoint
md	let	No	ColumnBreakpoint	undefined	Set the medium breakpoint
lg	let	No	ColumnBreakpoint	undefined	Set the large breakpoint
xlg	let	No	ColumnBreakpoint	undefined	Set the extra large breakpoint
max	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;
}

Props

Prop name	Kind	Reactive	Type	Default value	Description
listRef	let	Yes	null | HTMLDivElement	null	Obtain a reference to the list HTML element
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
open	let	Yes	boolean	false	Set to true to open the combobox menu dropdown
value	let	Yes	string	""	Specify the selected combobox value
selectedId	let	Yes	ComboBoxItemId	undefined	Set the selected item by value id
items	let	No	ComboBoxItem[]	[]	Set the combobox items
itemToString	let	No	(item: ComboBoxItem) => string	(item) => item.text || item.id	Override the display of a combobox item
direction	let	No	"bottom" | "top"	"bottom"	Specify the direction of the combobox dropdown menu
size	let	No	"sm" | "xl"	undefined	Set the size of the combobox
disabled	let	No	boolean	false	Set to true to disable the combobox
titleText	let	No	string	""	Specify the title text of the combobox
placeholder	let	No	string	""	Specify the placeholder text
helperText	let	No	string	""	Specify the helper text
invalidText	let	No	string	""	Specify the invalid state text
invalid	let	No	boolean	false	Set to true to indicate an invalid state
warn	let	No	boolean	false	Set to true to indicate an warning state
warnText	let	No	string	""	Specify the warning state text
light	let	No	boolean	false	Set to true to enable the light variant
shouldFilterItem	let	No	(item: ComboBoxItem, value: string) => boolean	() => true	Determine if an item should be filtered given the current combobox value
translateWithId	let	No	(id: any) => string	undefined	Override the default translation ids
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the list box component
name	let	No	string	undefined	Specify a name attribute for the input
clear	function	No	(options?: { focus?: boolean; }) => void	() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); }	Clear the combo box programmatically

Slots

None.

Events

Event name	Type	Detail
select	dispatched	{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }
keydown	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	forwarded	--
clear	forwarded	--
scroll	forwarded	--

ComposedModal

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLDivElement	null	Obtain a reference to the top-level HTML element
open	let	Yes	boolean	false	Set to true to open the modal
size	let	No	"xs" | "sm" | "lg"	undefined	Set the size of the composed modal
danger	let	No	boolean	false	Set to true to use the danger variant
preventCloseOnClickOutside	let	No	boolean	false	Set to true to prevent the modal from closing when clicking outside
containerClass	let	No	string	""	Specify a class for the inner modal
selectorPrimaryFocus	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	--
click:button--primary	dispatched	--
close	dispatched	--
open	dispatched	--

Content

Props

Prop name	Kind	Reactive	Type	Default value	Description
id	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	Kind	Reactive	Type	Default value	Description
selectedIndex	let	Yes	number	0	Set the selected index of the switch item
light	let	No	boolean	false	Set to true to enable the light variant
size	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLUListElement	null	Obtain a reference to the unordered list HTML element
y	let	Yes	number	0	Specify the vertical offset of the menu position
x	let	Yes	number	0	Specify the horizontal offset of the menu position
open	let	Yes	boolean	false	Set to true to open the menu Either x and y must be greater than zero
target	let	No	null | HTMLElement | 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	--

ContextMenuDivider

Props

None.

Slots

None.

Events

None.

ContextMenuGroup

Props

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

Slots

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

Events

None.

ContextMenuOption

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLLIElement	null	Obtain a reference to the list item HTML element
selectable	let	Yes	boolean	false	Set to true to enable the selectable variant Automatically set to true if selected is true
selected	let	Yes	boolean	false	Set to true to use the selected variant
icon	let	Yes	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render Icon is rendered to the left of the label text
indented	let	Yes	boolean	false	Set to true to indent the label
kind	let	No	"default" | "danger"	"default"	Specify the kind of option
disabled	let	No	boolean	false	Set to true to enable the disabled state
labelText	let	No	string	""	Specify the label text Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>)
shortcutText	let	No	string	""	Specify the shortcut text Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>)
id	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	--	--
labelText	No	--	{labelText}
shortcutText	No	--	{shortcutText}

Events

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

ContextMenuRadioGroup

Props

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

Slots

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

Events

None.

Copy

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the button HTML element
feedback	let	No	string	"Copied!"	Set the feedback text shown after clicking the button
feedbackTimeout	let	No	number	2000	Set the timeout duration (ms) to display feedback text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	{#if animation}{feedback || $$restProps["aria-label"]}{/if}

Events

Event name	Type	Detail
click	forwarded	--
animationend	forwarded	--

CopyButton

Props

Prop name	Kind	Reactive	Type	Default value	Description
iconDescription	let	No	string	"Copy to clipboard"	Set the title and ARIA label for the copy button
text	let	No	string	undefined	Specify the text to copy
copy	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	--

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;
}

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

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	Kind	Reactive	Type	Default value	Description
selectedRowIds	let	Yes	DataTableRowId[]	[]	Specify the row ids to be selected
selectable	let	Yes	boolean	false	Set to true for the selectable variant Automatically set to true if radio or batchSelection are true
expandedRowIds	let	Yes	DataTableRowId[]	[]	Specify the row ids to be expanded
expandable	let	Yes	boolean	false	Set to true for the expandable variant Automatically set to true if batchExpansion is true
rows	let	Yes	DataTableRow[]	[]	Specify the rows the data table should render keys defined in headers are used for the row ids
headers	let	No	DataTableHeader[]	[]	Specify the data table headers
size	let	No	"compact" | "short" | "medium" | "tall"	undefined	Set the size of the data table
title	let	No	string	""	Specify the title of the data table
description	let	No	string	""	Specify the description of the data table
zebra	let	No	boolean	false	Set to true to use zebra styles
sortable	let	No	boolean	false	Set to true for the sortable variant
batchExpansion	let	No	boolean	false	Set to true to enable batch expansion
nonExpandableRowIds	let	No	DataTableRowId[]	[]	Specify the ids for rows that should not be expandable
radio	let	No	boolean	false	Set to true for the radio selection variant
batchSelection	let	No	boolean	false	Set to true to enable batch selection
stickyHeader	let	No	boolean	false	Set to true to enable a sticky header
useStaticWidth	let	No	boolean	false	Set to true to use static width
pageSize	let	No	number	0	Specify the number of items to display in a page
page	let	No	number	0	Set to number to set current page

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
cell	No	{ row: DataTableRow; cell: DataTableCell; }	{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:row	dispatched	DataTableRow
mouseenter:row	dispatched	DataTableRow
mouseleave:row	dispatched	DataTableRow
click:row--expand	dispatched	{ expanded: boolean; row: DataTableRow; }
click:cell	dispatched	DataTableCell

DataTableSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
columns	let	No	number	5	Specify the number of columns Superseded by headers if headers is a non-empty array
rows	let	No	number	5	Specify the number of rows
size	let	No	"compact" | "short" | "tall"	undefined	Set the size of the data table
zebra	let	No	boolean	false	Set to true to apply zebra styles to the datatable rows
showHeader	let	No	boolean	true	Set to false to hide the header
headers	let	No	string[] | Partial[]	[]	Set the column headers Supersedes columns if value is a non-empty array
showToolbar	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	Kind	Reactive	Type	Default value	Description
valueTo	let	Yes	string	""	Specify the date picker end date value (to) Only works with the "range" date picker type
valueFrom	let	Yes	string	""	Specify the date picker start date value (from) Only works with the "range" date picker type
value	let	Yes	number | string	""	Specify the date picker input value
datePickerType	let	No	"simple" | "single" | "range"	"simple"	Specify the date picker type
dateFormat	let	No	string	"m/d/Y"	Specify the date format
maxDate	let	No	null | string | Date	null	Specify the maximum date
minDate	let	No	null | string | Date	null	Specify the minimum date
locale	let	No	import("flatpickr/dist/types/locale").CustomLocale | import("flatpickr/dist/types/locale").key	"en"	Specify the locale
short	let	No	boolean	false	Set to true to use the short variant
light	let	No	boolean	false	Set to true to enable the light variant
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the date picker element
flatpickrProps	let	No	import("flatpickr/dist/types/options").Options	{}	Override the options passed to the Flatpickr instance 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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
size	let	No	"sm" | "xl"	undefined	Set the size of the input
type	let	No	string	"text"	Specify the input type
placeholder	let	No	string	""	Specify the input placeholder text
pattern	let	No	string	"\d{1,2}\/\d{1,2}\/\d{4}"	Specify the Regular Expression for the input value
disabled	let	No	boolean	false	Set to true to disable the input
helperText	let	No	string	""	Specify the helper text
iconDescription	let	No	string	""	Specify the ARIA label for the calendar icon
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the invalid state text
warn	let	No	boolean	false	Set to true to indicate an warning state
warnText	let	No	string	""	Specify the warning state text
name	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	--

DatePickerSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
range	let	No	boolean	false	Set to true to use the range variant
id	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;
}

Props

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

Slots

None.

Events

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

DropdownSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
inline	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the top-level element
tilePadding	let	Yes	number	0	Specify the padding of the tile (number of pixels)
tileMaxHeight	let	Yes	number	0	Specify the max height of the tile (number of pixels)
expanded	let	Yes	boolean	false	Set to true to expand the tile
light	let	No	boolean	false	Set to true to enable the light variant
tileCollapsedIconText	let	No	string	"Interact to expand Tile"	Specify the icon text of the collapsed tile
tileExpandedIconText	let	No	string	"Interact to collapse Tile"	Specify the icon text of the expanded tile
tileExpandedLabel	let	No	string	""	Specify the icon label of the expanded tile
tileCollapsedLabel	let	No	string	""	Specify the icon label of the collapsed tile
tabindex	let	No	string	"0"	Specify the tabindex
id	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	Kind	Reactive	Type	Default value	Description
files	let	Yes	File[]	[]	Obtain the uploaded file names
status	let	No	"uploading" | "edit" | "complete"	"uploading"	Specify the file uploader status
accept	let	No	string[]	[]	Specify the accepted file types
multiple	let	No	boolean	false	Set to true to allow multiple files
clearFiles	const	No	() => void	() => { files = []; }	Override the default behavior of clearing the array of uploaded files
labelDescription	let	No	string	""	Specify the label description
labelTitle	let	No	string	""	Specify the label title
kind	let	No	"primary" | "secondary" | "tertiary" | "ghost" | "danger"	"primary"	Specify the kind of file uploader button
buttonLabel	let	No	string	""	Specify the button label
iconDescription	let	No	string	"Provide icon description"	Specify the ARIA label used for the status icons
name	let	No	string	""	Specify a name attribute for the file button uploader input

Slots

None.

Events

Event name	Type	Detail
add	dispatched	File[]
remove	dispatched	File[]
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
keydown	forwarded	--

FileUploaderButton

Props

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

Slots

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

Events

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

FileUploaderDropContainer

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
accept	let	No	string[]	[]	Specify the accepted file types
multiple	let	No	boolean	false	Set to true to allow multiple files
validateFiles	let	No	(files: FileList) => FileList	(files) => files	Override the default behavior of validating uploaded files The default behavior does not validate files
labelText	let	No	string	"Add file"	Specify the label text
role	let	No	string	"button"	Specify the role attribute of the drop container
disabled	let	No	boolean	false	Set to true to disable the input
tabindex	let	No	string	"0"	Specify tabindex attribute
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	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	FileList
dragover	forwarded	--
dragleave	forwarded	--
drop	forwarded	--
keydown	forwarded	--
change	forwarded	--
click	forwarded	--

FileUploaderItem

Props

Prop name	Kind	Reactive	Type	Default value	Description
status	let	No	"uploading" | "edit" | "complete"	"uploading"	Specify the file uploader status
size	let	No	"default" | "field" | "small"	"default"	Specify the size of button skeleton
iconDescription	let	No	string	""	Specify the ARIA label used for the status icons
invalid	let	No	boolean	false	Set to true to indicate an invalid state
errorSubject	let	No	string	""	Specify the error subject text
errorBody	let	No	string	""	Specify the error body text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the top-level element
name	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	Kind	Reactive	Type	Default value	Description
status	let	No	"uploading" | "edit" | "complete"	"uploading"	Specify the file name status
iconDescription	let	No	string	""	Specify the ARIA label used for the status icons
invalid	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	Kind	Reactive	Type	Default value	Description
ref	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	Kind	Reactive	Type	Default value	Description
noMargin	let	No	boolean	false	Set to true for to remove the bottom margin
invalid	let	No	boolean	false	Set to true to indicate an invalid state
message	let	No	boolean	false	Set to true to render a form requirement
messageText	let	No	string	""	Specify the message text
legendText	let	No	string	""	Specify the legend text
legendId	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	Kind	Reactive	Type	Default value	Description
id	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	Kind	Reactive	Type	Default value	Description
as	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	let	No	boolean	false	Set to true to use the condensed variant
narrow	let	No	boolean	false	Set to true to use the narrow variant
fullWidth	let	No	boolean	false	Set to true to use the fullWidth variant
noGutter	let	No	boolean	false	Set to true to remove the gutter
noGutterLeft	let	No	boolean	false	Set to true to remove the left gutter
noGutterRight	let	No	boolean	false	Set to true to remove the right gutter
padding	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the HTML anchor element
isSideNavOpen	let	Yes	boolean	false	Set to true to open the side nav
expandedByDefault	let	No	boolean	true	Set to false to hide the side nav by default
uiShellAriaLabel	let	No	string	undefined	Specify the ARIA label for the header
href	let	No	string	undefined	Specify the href attribute
company	let	No	string	undefined	Specify the company name
platformName	let	No	string	""	Specify the platform name Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>)
persistentHamburgerMenu	let	No	boolean	false	Set to true to persist the hamburger menu
expansionBreakpoint	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	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render for the closed state Defaults to Menu20
iconClose	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render for the opened state Defaults to Close20

Slots

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

Events

Event name	Type	Detail
click	forwarded	--

HeaderAction

Types

export interface HeaderActionSlideTransition {
  delay?: number;
  duration?: number;
  easing?: (t: number) => number;
}

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the button HTML element
isOpen	let	Yes	boolean	false	Set to true to open the panel
icon	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render
closeIcon	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render when the action panel is open
text	let	No	string	undefined	Specify the text Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)
transition	let	No	false | HeaderActionSlideTransition	{ duration: 200 }	Customize the panel transition (i.e., transition:slide) Set to false to disable the transition

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
text	No	--	{#if text}<span>{text}</span>{/if}

Events

Event name	Type	Detail
click	forwarded	--
close	dispatched	--

HeaderActionLink

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the HTML anchor element
linkIsActive	let	No	boolean	false	Set to true to use the active state
href	let	No	string	undefined	Specify the href attribute
icon	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render

Slots

None.

Events

None.

HeaderActionSearch

Props

Prop name	Kind	Reactive	Type	Default value	Description
searchIsActive	let	Yes	boolean	false	Set to true to focus the search

Slots

None.

Events

Event name	Type	Detail
inputSearch	dispatched	{ action: "search"; textInput: string; }
focusInputSearch	dispatched	--
focusOutInputSearch	dispatched	--

HeaderGlobalAction

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the HTML button element
isActive	let	No	boolean	false	Set to true to use the active variant
icon	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render

Slots

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

Events

Event name	Type	Detail
click	forwarded	--

HeaderNav

Props

Prop name	Kind	Reactive	Type	Default value	Description
ariaLabel	let	No	string	undefined	Specify the ARIA label for the nav

Slots

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

Events

None.

HeaderNavItem

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the HTML anchor element
href	let	No	string	undefined	Specify the href attribute
text	let	No	string	undefined	Specify the text
isSelected	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the HTML anchor element
expanded	let	Yes	boolean	false	Set to true to toggle the expanded state
href	let	No	string	"/"	Specify the href attribute
text	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the HTML anchor element
href	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	Kind	Reactive	Type	Default value	Description
selectedResultIndex	let	Yes	number	0	Specify the selected result index
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
active	let	Yes	boolean	false	Set to true to activate and focus the search bar
value	let	Yes	string	""	Specify the search input value
results	let	No	HeaderSearchResult[]	[]	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	any
inactive	dispatched	any
clear	dispatched	any
select	dispatched	{ value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult }
change	forwarded	--
input	forwarded	--
focus	forwarded	--
blur	forwarded	--
keydown	forwarded	--

HeaderUtilities

Props

None.

Slots

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

Events

None.

Icon

Props

Prop name	Kind	Reactive	Type	Default value	Description
render	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render
skeleton	let	No	boolean	false	Set to true to display the skeleton state

Slots

None.

Events

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

IconSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
size	let	No	number	16	Set the size of the icon

Slots

None.

Events

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

ImageLoader

Props

Prop name	Kind	Reactive	Type	Default value	Description
error	let	Yes	boolean	false	Set to true if an error occurs when loading the image
loaded	let	Yes	boolean	false	Set to true when the image is loaded
loading	let	Yes	boolean	false	Set to true when loaded is true and error is false
src	let	No	string	""	Specify the image source
alt	let	No	string	""	Specify the image alt text
ratio	let	No	"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"	undefined	Specify the aspect ratio for the image wrapper
fadeIn	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	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	any
error	dispatched	any

InlineLoading

Props

Prop name	Kind	Reactive	Type	Default value	Description
status	let	No	"active" | "inactive" | "finished" | "error"	"active"	Set the loading status
description	let	No	string	undefined	Set the loading description
iconDescription	let	No	string	undefined	Specify the ARIA label for the loading icon
successDelay	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	--

InlineNotification

Props

Prop name	Kind	Reactive	Type	Default value	Description
kind	let	No	"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"	"error"	Specify the kind of notification
lowContrast	let	No	boolean	false	Set to true to use the low contrast variant
timeout	let	No	number	0	Set the timeout duration (ms) to hide the notification after opening it
role	let	No	string	"alert"	Set the role attribute
title	let	No	string	""	Specify the title text
subtitle	let	No	string	""	Specify the subtitle text
hideCloseButton	let	No	boolean	false	Set to true to hide the close button
iconDescription	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement | HTMLParagraphElement	null	Obtain a reference to the top-level HTML element
size	let	No	"sm" | "lg"	undefined	Specify the size of the link
href	let	No	string	undefined	Specify the href value
inline	let	No	boolean	false	Set to true to use the inline variant
icon	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render inline must be false
disabled	let	No	boolean	false	Set to true to disable the checkbox
visited	let	No	boolean	false	Set to true to allow visited styles

Slots

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

Events

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

ListBox

Props

Prop name	Kind	Reactive	Type	Default value	Description
size	let	No	"sm" | "xl"	undefined	Set the size of the list box
type	let	No	"default" | "inline"	"default"	Set the type of the list box
open	let	No	boolean	false	Set to true to open the list box
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the list box
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the invalid state text
warn	let	No	boolean	false	Set to true to indicate an warning state
warnText	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLDivElement	null	Obtain a reference to the top-level HTML element
disabled	let	No	boolean	false	Set to true to disable the list box field
role	let	No	string	"combobox"	Specify the role attribute
tabindex	let	No	string	"-1"	Specify the tabindex
translationIds	const	No	{ close: "close", open: "open" }	{ close: "close", open: "open" }	Default translation ids
translateWithId	let	No	(id: ListBoxFieldTranslationId) => string	(id) => defaultTranslations[id]	Override the default translation ids
id	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLDivElement	null	Obtain a reference to the HTML element
id	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	Kind	Reactive	Type	Default value	Description
open	let	No	boolean	false	Set to true to open the list box menu icon
translationIds	const	No	{ close: "close", open: "open" }	{ close: "close", open: "open" }	Default translation ids
translateWithId	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	Kind	Reactive	Type	Default value	Description
active	let	No	boolean	false	Set to true to enable the active state
highlighted	let	No	boolean	false	Set to true to enable the highlighted state

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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLDivElement	null	Obtain a reference to the top-level HTML element
selectionCount	let	No	number	undefined	Specify the number of selected items
disabled	let	No	boolean	false	Set to true to disable the list box selection
translationIds	const	No	{ clearAll: "clearAll", clearSelection: "clearSelection", }	{ clearAll: "clearAll", clearSelection: "clearSelection", }	Default translation ids
translateWithId	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	Kind	Reactive	Type	Default value	Description
small	let	No	boolean	false	Set to true to use the small variant
active	let	No	boolean	true	Set to false to disable the active state
withOverlay	let	No	boolean	true	Set to false to disable the overlay
description	let	No	string	"Active loading indicator"	Specify the label description
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the label element

Slots

None.

Events

None.

LocalStorage

Props

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

Slots

None.

Events

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

Modal

Props

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

ModalBody

Props

Prop name	Kind	Reactive	Type	Default value	Description
hasForm	let	No	boolean	false	Set to true if the modal contains form elements
hasScrollingContent	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	Kind	Reactive	Type	Default value	Description
primaryButtonText	let	No	string	""	Specify the primary button text
primaryButtonDisabled	let	No	boolean	false	Set to true to disable the primary button
primaryClass	let	No	string	undefined	Specify a class for the primary button
secondaryButtonText	let	No	string	""	Specify the secondary button text
secondaryButtons	let	No	[{ text: string; }, { text: string; }]	[]	2-tuple prop to render two secondary buttons for a 3 button modal supersedes secondaryButtonText
secondaryClass	let	No	string	undefined	Specify a class for the secondary button
danger	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	Kind	Reactive	Type	Default value	Description
title	let	No	string	""	Specify the modal title
label	let	No	string	""	Specify the modal label
labelClass	let	No	string	""	Specify the label class
titleClass	let	No	string	""	Specify the title class
closeClass	let	No	string	""	Specify the close class
closeIconClass	let	No	string	""	Specify the close icon class
iconDescription	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;
}

Props

Prop name	Kind	Reactive	Type	Default value	Description
selectionRef	let	Yes	null | HTMLDivElement	null	Obtain a reference to the selection element
fieldRef	let	Yes	null | HTMLDivElement	null	Obtain a reference to the field box element
multiSelectRef	let	Yes	null | HTMLDivElement	null	Obtain a reference to the outer div element
inputRef	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
open	let	Yes	boolean	false	Set to true to open the dropdown
value	let	Yes	string	""	Specify the multiselect value
selectedIds	let	Yes	MultiSelectItemId[]	[]	Set the selected ids
items	let	Yes	MultiSelectItem[]	[]	Set the multiselect items
itemToString	let	No	(item: MultiSelectItem) => any	(item) => item.text || item.id	Override the display of a multiselect item
size	let	No	"sm" | "lg" | "xl"	undefined	Set the size of the combobox
type	let	No	"default" | "inline"	"default"	Specify the type of multiselect
direction	let	No	"bottom" | "top"	"bottom"	Specify the direction of the multiselect dropdown menu
selectionFeedback	let	No	"top" | "fixed" | "top-after-reopen"	"top-after-reopen"	Specify the selection feedback after selecting items
disabled	let	No	boolean	false	Set to true to disable the dropdown
filterable	let	No	boolean	false	Set to true to filter items
filterItem	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	let	No	boolean	false	Set to true to enable the light variant
locale	let	No	string	"en"	Specify the locale
placeholder	let	No	string	""	Specify the placeholder text
sortItem	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	let	No	(id: any) => string	undefined	Override the default translation ids
titleText	let	No	string	""	Specify the title text
useTitleInItem	let	No	boolean	false	Set to true to pass the item to itemToString in the checkbox
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the invalid state text
warn	let	No	boolean	false	Set to true to indicate an warning state
warnText	let	No	string	""	Specify the warning state text
helperText	let	No	string	""	Specify the helper text
label	let	No	string	""	Specify the list box label
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the list box component
name	let	No	string	undefined	Specify a name attribute for the select

Slots

None.

Events

Event name	Type	Detail
select	dispatched	{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }
clear	dispatched	any
keydown	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	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	Kind	Reactive	Type	Default value	Description
notificationType	let	No	"toast" | "inline"	"toast"	Set the type of notification
icon	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render
title	let	No	string	undefined	Specify the title of the icon
iconDescription	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	Kind	Reactive	Type	Default value	Description
kind	let	No	"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"	"error"	Specify the kind of notification icon
notificationType	let	No	"toast" | "inline"	"toast"	Set the type of notification
iconDescription	let	No	string	"Closes notification"	Specify the ARIA label for the icon

Slots

None.

Events

None.

NotificationTextDetails

Props

Prop name	Kind	Reactive	Type	Default value	Description
notificationType	let	No	"toast" | "inline"	"toast"	Set the type of notification
title	let	No	string	"Title"	Specify the title text
subtitle	let	No	string	""	Specify the subtitle text
caption	let	No	string	"Caption"	Specify the caption text

Slots

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

Events

None.

NumberInput

Types

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

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
value	let	Yes	number | string	""	Specify the input value
size	let	No	"sm" | "xl"	undefined	Set the size of the input
step	let	No	number	1	Specify the step increment
max	let	No	number	undefined	Specify the maximum value
min	let	No	number	undefined	Specify the minimum value
light	let	No	boolean	false	Set to true to enable the light variant
readonly	let	No	boolean	false	Set to true for the input to be read-only
mobile	let	No	boolean	false	Set to true to enable the mobile variant
allowEmpty	let	No	boolean	false	Set to true to allow for an empty value
disabled	let	No	boolean	false	Set to true to disable the input
hideSteppers	let	No	boolean	false	Set to true to hide the input stepper buttons
iconDescription	let	No	string	""	Specify the ARIA label for the increment icons
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the invalid state text
warn	let	No	boolean	false	Set to true to indicate an warning state
warnText	let	No	string	""	Specify the warning state text
helperText	let	No	string	""	Specify the helper text
label	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
translateWithId	let	No	(id: NumberInputTranslationId) => string	(id) => defaultTranslations[id]	Override the default translation ids
translationIds	const	No	{ increment: "increment"; decrement: "decrement" }	{ increment: "increment", decrement: "decrement", }	Default translation ids
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	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	number
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
input	forwarded	--
focus	forwarded	--
blur	forwarded	--

NumberInputSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
hideLabel	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	Kind	Reactive	Type	Default value	Description
nested	let	No	boolean	false	Set to true to use the nested variant
native	let	No	boolean	false	Set to true to use native list styles
expressive	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	Kind	Reactive	Type	Default value	Description
menuRef	let	Yes	null | HTMLUListElement	null	Obtain a reference to the overflow menu element
buttonRef	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the trigger button element
icon	let	Yes	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render
open	let	Yes	boolean	false	Set to true to open the menu
size	let	No	"sm" | "xl"	undefined	Specify the size of the overflow menu
direction	let	No	"top" | "bottom"	"bottom"	Specify the direction of the overflow menu relative to the button
light	let	No	boolean	false	Set to true to enable the light variant
flipped	let	No	boolean	false	Set to true to flip the menu relative to the button
menuOptionsClass	let	No	string	undefined	Specify the menu options class
iconClass	let	No	string	undefined	Specify the icon class
iconDescription	let	No	string	"Open and close list of options"	Specify the ARIA label for the icon
id	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement | HTMLButtonElement	null	Obtain a reference to the HTML element
primaryFocus	let	Yes	boolean	false	Set to true if the item should be focused when opening the menu
text	let	No	string	"Provide text"	Specify the item text Alternatively, use the default slot for a custom element
href	let	No	string	""	Specify the href attribute if the item is a link
disabled	let	No	boolean	false	Set to true to disable the item
hasDivider	let	No	boolean	false	Set to true to include a divider
danger	let	No	boolean	false	Set to true to use the danger variant
requireTitle	let	No	boolean	true	Set to false to omit the button title attribute
id	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	Kind	Reactive	Type	Default value	Description
pageSize	let	Yes	number	10	Specify the number of items to display in a page
page	let	Yes	number	1	Specify the current page index
totalItems	let	No	number	0	Specify the total number of items
disabled	let	No	boolean	false	Set to true to disable the pagination
forwardText	let	No	string	"Next page"	Specify the forward button text
backwardText	let	No	string	"Previous page"	Specify the backward button text
itemsPerPageText	let	No	string	"Items per page:"	Specify the items per page text
itemText	let	No	(min: number, max: number) => string	(min, max) => `${min}–${max} items`	Override the item text
itemRangeText	let	No	(min: number, max: number, total: number) => string	(min, max, total) => `${min}–${max} of ${total} items`	Override the item range text
pageInputDisabled	let	No	boolean	false	Set to true to disable the page input
pageSizeInputDisabled	let	No	boolean	false	Set to true to disable the page size input
pageSizes	let	No	number[]	[10]	Specify the available page sizes
pagesUnknown	let	No	boolean	false	Set to true if the number of pages is unknown
pageText	let	No	(page: number) => string	(page) => `page ${page}`	Override the page text
pageRangeText	let	No	(current: number, total: number) => string	(current, total) => `of ${total} page${total === 1 ? "" : "s"}`	Override the page range text
id	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	Kind	Reactive	Type	Default value	Description
page	let	Yes	number	0	Specify the current page index
total	let	No	number	10	Specify the total number of pages
shown	let	No	number	10	Specify the total number of pages to show
loop	let	No	boolean	false	Set to true to loop the navigation
forwardText	let	No	string	"Next page"	Specify the forward button text
backwardText	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
type	let	Yes	"text" | "password"	"password"	Set to "text" to toggle the password visibility
value	let	Yes	number | string	""	Specify the input value
size	let	No	"sm" | "xl"	undefined	Set the size of the input
placeholder	let	No	string	""	Specify the placeholder text
hidePasswordLabel	let	No	string	"Hide password"	Specify the hide password label text
showPasswordLabel	let	No	string	"Show password"	Specify the show password label text
tooltipAlignment	let	No	"start" | "center" | "end"	"center"	Set the alignment of the tooltip relative to the icon
tooltipPosition	let	No	"top" | "right" | "bottom" | "left"	"bottom"	Set the position of the tooltip relative to the icon
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the input
helperText	let	No	string	""	Specify the helper text
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the text for the invalid state
warn	let	No	boolean	false	Set to true to indicate an warning state
warnText	let	No	string	""	Specify the warning state text
inline	let	No	boolean	false	Set to true to use inline version
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	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	--

Popover

Props

Prop name	Kind	Reactive	Type	Default value	Description
open	let	Yes	boolean	false	Set to true to display the popover
closeOnOutsideClick	let	No	boolean	false	Set to true to close the popover on an outside click
caret	let	No	boolean	false	Set to true render a caret
align	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	let	No	boolean	false	Set to true to enable the light variant
highContrast	let	No	boolean	false	Set to true to enable the high contrast variant
relative	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	--

ProgressBar

Props

Prop name	Kind	Reactive	Type	Default value	Description
value	let	No	number	undefined	Specify the current value
max	let	No	number	100	Specify the maximum value
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
helperText	let	No	string	""	Specify the helper text
id	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	Kind	Reactive	Type	Default value	Description
currentIndex	let	Yes	number	0	Specify the current step index
vertical	let	No	boolean	false	Set to true to use the vertical variant
spaceEqually	let	No	boolean	false	Set to true to specify whether the progress steps should be split equally in size in the div
preventChangeOnClick	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	Kind	Reactive	Type	Default value	Description
vertical	let	No	boolean	false	Set to true to use the vertical variant
count	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	Kind	Reactive	Type	Default value	Description
current	let	Yes	boolean	false	Set to true to use the current variant
complete	let	Yes	boolean	false	Set to true for the complete variant
disabled	let	No	boolean	false	Set to true to disable the progress step
invalid	let	No	boolean	false	Set to true to indicate an invalid state
description	let	No	string	""	Specify the step description
label	let	No	string	""	Specify the step label
secondaryLabel	let	No	string	""	Specify the step secondary label
id	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
checked	let	Yes	boolean	false	Set to true to check the radio button
value	let	No	string	""	Specify the value of the radio button
disabled	let	No	boolean	false	Set to true to disable the radio button
required	let	No	boolean	false	Set to true to mark the field as required
labelPosition	let	No	"right" | "left"	"right"	Specify the label position
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	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	Kind	Reactive	Type	Default value	Description
selected	let	Yes	string	undefined	Set the selected radio button value
disabled	let	No	boolean	false	Set to true to disable the radio buttons
legendText	let	No	string	""	Specify the legend text
labelPosition	let	No	"right" | "left"	"right"	Specify the label position
orientation	let	No	"horizontal" | "vertical"	"horizontal"	Specify the orientation of the radio buttons
id	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	Kind	Reactive	Type	Default value	Description
checked	let	Yes	boolean	false	Set to true to check the tile
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the tile
value	let	No	string	""	Specify the value of the radio input
tabindex	let	No	string	"0"	Specify the tabindex
iconDescription	let	No	string	"Tile checkmark"	Specify the ARIA label for the radio tile checkmark icon
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	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	Kind	Reactive	Type	Default value	Description
children	let	No	Array<RecursiveListNode & { children?: RecursiveListNode[]; }>	[]	Specify the children to render
type	let	No	"unordered" | "ordered" | "ordered-native"	"unordered"	Specify the type of list to render

Slots

None.

Events

None.

Row

Props

Prop name	Kind	Reactive	Type	Default value	Description
as	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	let	No	boolean	false	Set to true to use the condensed variant
narrow	let	No	boolean	false	Set to true to use the narrow variant
noGutter	let	No	boolean	false	Set to true to remove the gutter
noGutterLeft	let	No	boolean	false	Set to true to remove the left gutter
noGutterRight	let	No	boolean	false	Set to true to remove the right gutter
padding	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
value	let	Yes	string	""	Specify the value of the search input
expanded	let	Yes	boolean	false	Set to `true to expand the search input
small	let	No	boolean	false	--
size	let	No	"sm" | "lg" | "xl"	"xl"	Specify the size of the search input
searchClass	let	No	string	""	Specify the class name passed to the outer div element
skeleton	let	No	boolean	false	Set to true to display the skeleton state
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the search input
expandable	let	No	boolean	false	Set to true to enable the expandable variant
type	let	No	string	"text"	Specify the type attribute of the search input
placeholder	let	No	string	"Search..."	Specify the placeholder attribute of the search input
autocomplete	let	No	"on" | "off"	"off"	Specify the autocomplete attribute
autofocus	let	No	boolean	false	Set to true to auto focus the search element
closeButtonLabelText	let	No	string	"Clear search input"	Specify the close button label text
labelText	let	No	string	""	Specify the label text
icon	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render
id	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	any
collapse	dispatched	any
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
input	forwarded	--
focus	forwarded	--
blur	forwarded	--
keydown	forwarded	--
keyup	forwarded	--
clear	dispatched	--

SearchSkeleton

Props

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

SelectItem

Props

Prop name	Kind	Reactive	Type	Default value	Description
value	let	No	string	""	Specify the option value
text	let	No	string	""	Specify the option text
hidden	let	No	boolean	false	Set to true to hide the option
disabled	let	No	boolean	false	Set to true to disable the option

Slots

None.

Events

None.

SelectItemGroup

Props

Prop name	Kind	Reactive	Type	Default value	Description
disabled	let	No	boolean	false	Set to true to disable the optgroup element
label	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	Kind	Reactive	Type	Default value	Description
hideLabel	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
selected	let	Yes	boolean	false	Set to true to select the tile
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the tile
title	let	No	string	"title"	Specify the title of the selectable tile
value	let	No	string	"value"	Specify the value of the selectable tile
tabindex	let	No	string	"0"	Specify the tabindex
iconDescription	let	No	string	"Tile checkmark"	Specify the ARIA label for the selectable tile checkmark icon
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	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	Kind	Reactive	Type	Default value	Description
isOpen	let	Yes	boolean	false	Set to true to toggle the expanded state
fixed	let	No	boolean	false	Set to true to use the fixed variant
rail	let	No	boolean	false	Set to true to use the rail variant
ariaLabel	let	No	string	undefined	Specify the ARIA label for the nav
expansionBreakpoint	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	any
close	dispatched	any
click:overlay	dispatched	any

SideNavDivider

Props

None.

Slots

None.

Events

None.

SideNavItems

Props

None.

Slots

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

Events

None.

SideNavLink

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the HTML anchor element
isSelected	let	No	boolean	false	Set to true to select the current link
href	let	No	string	undefined	Specify the href attribute
text	let	No	string	undefined	Specify the text
icon	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--

SideNavMenu

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the HTML button element
expanded	let	Yes	boolean	false	Set to true to toggle the expanded state
text	let	No	string	undefined	Specify the text
icon	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render

Slots

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

Events

Event name	Type	Detail
click	forwarded	--

SideNavMenuItem

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the HTML anchor element
isSelected	let	No	boolean	false	Set to true to select the item
href	let	No	string	undefined	Specify the href attribute
text	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	Kind	Reactive	Type	Default value	Description
lines	let	No	number	3	Specify the number of lines to render
heading	let	No	boolean	false	Set to true to use the heading size variant
paragraph	let	No	boolean	false	Set to true to use the paragraph size variant
width	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	Kind	Reactive	Type	Default value	Description
href	let	No	string	"#main-content"	Specify the href attribute
tabindex	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLDivElement	null	Obtain a reference to the HTML element
value	let	Yes	number	0	Specify the value of the slider
max	let	No	number	100	Set the maximum slider value
maxLabel	let	No	string	""	Specify the label for the max value
min	let	No	number	0	Set the minimum slider value
minLabel	let	No	string	""	Specify the label for the min value
step	let	No	number	1	Set the step value
stepMultiplier	let	No	number	4	Set the step multiplier value
required	let	No	boolean	false	Set to true to require a value
inputType	let	No	string	"number"	Specify the input type
disabled	let	No	boolean	false	Set to true to disable the slider
light	let	No	boolean	false	Set to true to enable the light variant
hideTextInput	let	No	boolean	false	Set to true to hide the text input
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the slider div element
invalid	let	No	boolean	false	Set to true to indicate an invalid state
labelText	let	No	string	""	Specify the label text
name	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	Kind	Reactive	Type	Default value	Description
hideLabel	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	Kind	Reactive	Type	Default value	Description
selected	let	Yes	string	undefined	Specify the selected structured list row value
border	let	No	boolean	false	Set to true to use the bordered variant
condensed	let	No	boolean	false	Set to true to use the condensed variant
flush	let	No	boolean	false	Set to true to flush the list
selection	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	Kind	Reactive	Type	Default value	Description
head	let	No	boolean	false	Set to true to use as a header
noWrap	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
checked	let	Yes	boolean	false	Set to true to check the input
title	let	No	string	"title"	Specify the title of the input
value	let	No	string	"value"	Specify the value of the input
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	""	Specify a name attribute for the input

Slots

None.

Events

None.

StructuredListRow

Props

Prop name	Kind	Reactive	Type	Default value	Description
head	let	No	boolean	false	Set to true to use as a header
label	let	No	boolean	false	Set to true to render a label slot
tabindex	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	Kind	Reactive	Type	Default value	Description
rows	let	No	number	5	Specify the number of rows
border	let	No	boolean	false	Set to true to use the bordered variant

Slots

None.

Events

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

Switch

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the button HTML element
selected	let	Yes	boolean	false	Set to true for the switch to be selected
text	let	No	string	"Provide text"	Specify the switch text Alternatively, use the "text" slot (e.g., <span slot="text">...</span>)
disabled	let	No	boolean	false	Set to true to disable the switch
id	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the anchor HTML element
label	let	No	string	""	Specify the tab label Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)
href	let	No	string	"#"	Specify the href attribute
disabled	let	No	boolean	false	Set to true to disable the tab
tabindex	let	No	string	"0"	Specify the tabindex
id	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	Kind	Reactive	Type	Default value	Description
id	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	Kind	Reactive	Type	Default value	Description
size	let	No	"compact" | "short" | "medium" | "tall"	undefined	Set the size of the table
zebra	let	No	boolean	false	Set to true to use zebra styles
useStaticWidth	let	No	boolean	false	Set to true to use static width
shouldShowBorder	let	No	boolean	false	Set to true for the bordered variant
sortable	let	No	boolean	false	Set to true for the sortable variant
stickyHeader	let	No	boolean	false	Set to true to enable a sticky header

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	Kind	Reactive	Type	Default value	Description
title	let	No	string	""	Specify the title of the data table
description	let	No	string	""	Specify the description of the data table
stickyHeader	let	No	boolean	false	Set to true to enable a sticky header
useStaticWidth	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	Kind	Reactive	Type	Default value	Description
disableSorting	let	No	boolean	false	Set to true to disable sorting on this specific cell
scope	let	No	string	"col"	Specify the scope attribute
translateWithId	let	No	() => string	() => ""	Override the default id translations
id	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	Kind	Reactive	Type	Default value	Description
selected	let	Yes	number	0	Specify the selected tab index
type	let	No	"default" | "container"	"default"	Specify the type of tabs
autoWidth	let	No	boolean	false	Set to true for tabs to have an auto-width
iconDescription	let	No	string	"Show menu options"	Specify the ARIA label for the chevron icon
triggerHref	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	Kind	Reactive	Type	Default value	Description
count	let	No	number	4	Specify the number of tabs to render
type	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	Kind	Reactive	Type	Default value	Description
type	let	No	"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline"	undefined	Specify the type of tag
size	let	No	"sm" | "default"	"default"	--
filter	let	No	boolean	false	Set to true to use filterable variant
disabled	let	No	boolean	false	Set to true to disable a filterable tag
interactive	let	No	boolean	false	Set to true to render a button element instead of a div
skeleton	let	No	boolean	false	Set to true to display the skeleton state
title	let	No	string	"Clear filter"	Set the title for the close button in a filterable tag
icon	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render
id	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' } }	--

Events

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

TagSkeleton

Props

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

Slots

None.

Events

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

TextArea

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLTextAreaElement	null	Obtain a reference to the textarea HTML element
value	let	Yes	string	""	Specify the textarea value
placeholder	let	No	string	""	Specify the placeholder text
cols	let	No	number	50	Specify the number of cols
rows	let	No	number	4	Specify the number of rows
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the input
helperText	let	No	string	""	Specify the helper text
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the text for the invalid state
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the textarea element
name	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	--

TextAreaSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
hideLabel	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
value	let	Yes	number | string	""	Specify the input value
size	let	No	"sm" | "xl"	undefined	Set the size of the input
type	let	No	string	""	Specify the input type
placeholder	let	No	string	""	Specify the placeholder text
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the input
helperText	let	No	string	""	Specify the helper text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	undefined	Specify a name attribute for the input
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the invalid state text
warn	let	No	boolean	false	Set to true to indicate an warning state
warnText	let	No	string	""	Specify the warning state text
required	let	No	boolean	false	Set to true to mark the field as required
inline	let	No	boolean	false	Set to true to use the inline variant
readonly	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
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
input	forwarded	--
keydown	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	forwarded	--

TextInputSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
hideLabel	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	Kind	Reactive	Type	Default value	Description
theme	let	Yes	CarbonTheme	"white"	Set the current Carbon theme
tokens	let	No	{ [token: string]: any; }	{}	Customize a theme with your own tokens https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme
persist	let	No	boolean	false	Set to true to persist the theme using window.localStorage
persistKey	let	No	string	"theme"	Specify the local storage key
render	let	No	"toggle" | "select"	undefined	Render a toggle or select dropdown to control the theme
toggle	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	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	Kind	Reactive	Type	Default value	Description
light	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	Kind	Reactive	Type	Default value	Description
selected	let	Yes	string	undefined	Specify the selected tile value
disabled	let	No	boolean	false	Set to true to disable the tile group
legend	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
value	let	Yes	string	""	Specify the input value
size	let	No	"sm" | "xl"	undefined	Specify the size of the input
type	let	No	string	"text"	Specify the input type
placeholder	let	No	string	"hh:mm"	Specify the input placeholder text
pattern	let	No	string	"(1[012]|[1-9]):[0-5]0-9?"	Specify the pattern attribute for the input element
maxlength	let	No	number	5	Specify the maxlength input attribute
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the input
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the invalid state text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	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	--

TimePickerSelect

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLSelectElement	null	Obtain a reference to the select HTML element
value	let	Yes	number | string	""	Specify the select value
disabled	let	No	boolean	false	Set to true to disable the select
iconDescription	let	No	string	"Open list of options"	Specify the ARIA label for the chevron icon
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	true	--
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the select element
name	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	Kind	Reactive	Type	Default value	Description
kind	let	No	"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"	"error"	Specify the kind of notification
lowContrast	let	No	boolean	false	Set to true to use the low contrast variant
timeout	let	No	number	0	Set the timeout duration (ms) to hide the notification after opening it
role	let	No	string	"alert"	Set the role attribute
title	let	No	string	""	Specify the title text
subtitle	let	No	string	""	Specify the subtitle text
caption	let	No	string	""	Specify the caption text
iconDescription	let	No	string	"Closes notification"	Specify the ARIA label for the icon
hideCloseButton	let	No	boolean	false	Set to true to hide the close button

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	Kind	Reactive	Type	Default value	Description
toggled	let	Yes	boolean	false	Set to true to toggle the checkbox input
size	let	No	"default" | "sm"	"default"	Specify the toggle size
disabled	let	No	boolean	false	Set to true to disable checkbox input
labelA	let	No	string	"Off"	Specify the label for the untoggled state
labelB	let	No	string	"On"	Specify the label for the toggled state
labelText	let	No	string	""	Specify the label text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	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	Kind	Reactive	Type	Default value	Description
size	let	No	"default" | "sm"	"default"	Specify the toggle size
labelText	let	No	string	""	Specify the label text
id	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	--

ToggleSmall

Props

Prop name	Kind	Reactive	Type	Default value	Description
toggled	let	Yes	boolean	false	Set to true to toggle the checkbox input
disabled	let	No	boolean	false	Set to true to disable checkbox input
labelA	let	No	string	"Off"	Specify the label for the untoggled state
labelB	let	No	string	"On"	Specify the label for the toggled state
labelText	let	No	string	""	Specify the label text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	undefined	Specify a name attribute for the checkbox input

Slots

None.

Events

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

ToggleSmallSkeleton

Props

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

Slots

None.

Events

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

Toolbar

Props

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

Slots

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

Events

None.

ToolbarBatchActions

Props

Prop name	Kind	Reactive	Type	Default value	Description
formatTotalSelected	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

None.

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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
expanded	let	Yes	boolean	false	Set to true to expand the search bar
value	let	Yes	number | string	""	Specify the value of the search input
persistent	let	No	boolean	false	Set to true to keep the search bar expanded
disabled	let	No	boolean	false	Set to true to disable the search bar
tabindex	let	No	string	"0"	Specify the tabindex

Slots

None.

Events

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

Tooltip

Props

Prop name	Kind	Reactive	Type	Default value	Description
refIcon	let	Yes	null | HTMLDivElement	null	Obtain a reference to the icon HTML element
refTooltip	let	Yes	null | HTMLDivElement	null	Obtain a reference to the tooltip HTML element
ref	let	Yes	null | HTMLDivElement	null	Obtain a reference to the trigger text HTML element
open	let	Yes	boolean	false	Set to true to open the tooltip
align	let	No	"start" | "center" | "end"	"center"	Set the alignment of the tooltip relative to the icon
direction	let	No	"top" | "right" | "bottom" | "left"	"bottom"	Set the direction of the tooltip relative to the button
hideIcon	let	No	boolean	false	Set to true to hide the tooltip icon
icon	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render for the tooltip button Icon size must be 16px (e.g., Add16, Task16)
iconDescription	let	No	string	""	Specify the ARIA label for the tooltip button
iconName	let	No	string	""	Specify the icon name attribute
tabindex	let	No	string	"0"	Set the button tabindex
tooltipId	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the tooltip
triggerId	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the tooltip button
triggerText	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
click	forwarded	--
mousedown	forwarded	--

TooltipDefinition

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the button HTML element
tooltipText	let	No	string	""	Specify the tooltip text
align	let	No	"start" | "center" | "end"	"center"	Set the alignment of the tooltip relative to the icon
direction	let	No	"top" | "bottom"	"bottom"	Set the direction of the tooltip relative to the icon
id	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
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
focus	forwarded	--

TooltipFooter

Props

Prop name	Kind	Reactive	Type	Default value	Description
selectorPrimaryFocus	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	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the button HTML element
tooltipText	let	No	string	""	Specify the tooltip text. Alternatively, use the "tooltipText" slot
icon	let	No	typeof import("svelte").SvelteComponent	undefined	Specify the icon to render
disabled	let	No	boolean	false	Set to true to disable the tooltip icon
align	let	No	"start" | "center" | "end"	"center"	Set the alignment of the tooltip relative to the icon
direction	let	No	"top" | "right" | "bottom" | "left"	"bottom"	Set the direction of the tooltip relative to the icon
id	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	Kind	Reactive	Type	Default value	Description
expandedIds	let	Yes	TreeNodeId[]	[]	Set the node ids to be expanded
selectedIds	let	Yes	TreeNodeId[]	[]	Set the node ids to be selected
activeId	let	Yes	TreeNodeId	""	Set the current active node id Only one node can be active
children	let	No	Array<TreeNode & { children?: TreeNode[] }>	[]	Provide an array of children nodes to render
size	let	No	"default" | "compact"	"default"	Specify the TreeView size
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
expandAll	function	No	() => void	() => { expandedIds = [...nodeIds]; }	Programmatically expand all nodes
collapseAll	function	No	() => void	() => { expandedIds = []; }	Programmatically collapse all nodes
expandNodes	function	No	(filterId?: (node: TreeNode) => boolean) => void	() => { expandedIds = nodes .filter((node) => !filterNode(node)) .map((node) => node.id); }	Programmatically expand a subset of nodes. Expands all nodes if no argument is provided
collapseNodes	function	No	(filterId?: (node: TreeNode) => boolean) => void	() => { expandedIds = nodes .filter((node) => !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	Kind	Reactive	Type	Default value	Description
clamp	let	No	"end" | "front"	"end"	--

Slots

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

Events

None.

UnorderedList

Props

Prop name	Kind	Reactive	Type	Default value	Description
nested	let	No	boolean	false	Set to true to use the nested variant
expressive	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	--