mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
405 KiB
405 KiB
Component Index
165 components exported from carbon-components-svelte@0.85.4.
Components
AccordionAccordionItemAccordionSkeletonAspectRatioBreadcrumbBreadcrumbItemBreadcrumbSkeletonBreakpointButtonButtonSetButtonSkeletonCheckboxCheckboxSkeletonClickableTileCodeSnippetCodeSnippetSkeletonColumnComboBoxComposedModalContentContentSwitcherContextMenuContextMenuDividerContextMenuGroupContextMenuOptionContextMenuRadioGroupCopyButtonDataTableDataTableSkeletonDatePickerDatePickerInputDatePickerSkeletonDropdownDropdownSkeletonExpandableTileFileUploaderFileUploaderButtonFileUploaderDropContainerFileUploaderItemFileUploaderSkeletonFilenameFluidFormFormFormGroupFormItemFormLabelGridHeaderHeaderActionHeaderActionLinkHeaderGlobalActionHeaderNavHeaderNavItemHeaderNavMenuHeaderPanelDividerHeaderPanelLinkHeaderPanelLinksHeaderSearchHeaderUtilitiesImageLoaderInlineLoadingInlineNotificationLinkListBoxListBoxFieldListBoxMenuListBoxMenuIconListBoxMenuItemListBoxSelectionListItemLoadingLocalStorageModalModalBodyModalFooterModalHeaderMultiSelectNotificationActionButtonNotificationButtonNotificationIconNumberInputNumberInputSkeletonOrderedListOutboundLinkOverflowMenuOverflowMenuItemPaginationPaginationNavPaginationSkeletonPasswordInputPopoverProgressBarProgressIndicatorProgressIndicatorSkeletonProgressStepRadioButtonRadioButtonGroupRadioButtonSkeletonRadioTileRecursiveListRowSearchSearchSkeletonSelectSelectItemSelectItemGroupSelectSkeletonSelectableTileSideNavSideNavDividerSideNavItemsSideNavLinkSideNavMenuSideNavMenuItemSkeletonPlaceholderSkeletonTextSkipToContentSliderSliderSkeletonStructuredListStructuredListBodyStructuredListCellStructuredListHeadStructuredListInputStructuredListRowStructuredListSkeletonSwitchTabTabContentTableTableBodyTableCellTableContainerTableHeadTableHeaderTableRowTabsTabsSkeletonTagTagSkeletonTextAreaTextAreaSkeletonTextInputTextInputSkeletonThemeTileTileGroupTimePickerTimePickerSelectToastNotificationToggleToggleSkeletonToolbarToolbarBatchActionsToolbarContentToolbarMenuToolbarMenuItemToolbarSearchTooltipTooltipDefinitionTooltipFooterTooltipIconTreeViewTruncateUnorderedList
Accordion
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| align | No | let |
No | "start" | "end" |
"end" |
Specify alignment of accordion item chevron icon |
| size | No | let |
No | "sm" | "xl" |
undefined |
Specify the size of the accordion |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the accordion |
| skeleton | No | let |
No | boolean |
false |
Set to true to display the skeleton state |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
AccordionItem
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| disabled | No | let |
Yes | boolean |
false |
Set to true to disable the accordion item |
| open | No | let |
Yes | boolean |
false |
Set to true to open the first accordion item |
| title | No | let |
No | string |
"title" |
Specify the title of the accordion item heading. Alternatively, use the "title" slot (e.g., <div slot="title">...</div>) |
| iconDescription | No | let |
No | string |
"Expand/Collapse" |
Specify the ARIA label for the accordion item chevron icon |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| title | No | -- | {title} |
Events
| Event name | Type | Detail |
|---|---|---|
| animationend | forwarded | -- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
AccordionSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| count | No | let |
No | number |
4 |
Specify the number of accordion items to render |
| align | No | let |
No | "start" | "end" |
"end" |
Specify alignment of accordion item chevron icon |
| size | No | let |
No | "sm" | "xl" |
undefined |
Specify the size of the accordion |
| open | No | let |
No | boolean |
true |
Set to false to close the first accordion item |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
AspectRatio
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ratio | No | let |
No | "2x1" | "2x3" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" |
"2x1" |
Specify the aspect ratio |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
Breadcrumb
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| noTrailingSlash | No | let |
No | boolean |
false |
Set to true to hide the breadcrumb trailing slash |
| skeleton | No | let |
No | boolean |
false |
Set to true to display skeleton state |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
BreadcrumbItem
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| href | No | let |
No | string |
undefined |
Set the href to use an anchor link |
| isCurrentPage | No | let |
No | boolean |
false |
Set to true if the breadcrumb item represents the current page |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | {props?: { ["aria-current"]?: string; class: "bx--link"; }} |
-- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
BreadcrumbSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| noTrailingSlash | No | let |
No | boolean |
false |
Set to true to hide the breadcrumb trailing slash |
| count | No | let |
No | number |
3 |
Specify the number of breadcrumb items to render |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Breakpoint
Types
export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| sizes | No | let |
Yes | Record<BreakpointSize, boolean> |
{ sm: false, md: false, lg: false, xlg: false, max: false, } |
Carbon grid sizes as an object |
| size | No | let |
Yes | BreakpointSize |
undefined |
Determine the current Carbon grid breakpoint size |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | { size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; } |
-- |
Events
| Event name | Type | Detail |
|---|---|---|
| change | dispatched | { size: BreakpointSize; breakpointValue: BreakpointValue; } |
Button
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLAnchorElement | HTMLButtonElement |
null |
Obtain a reference to the HTML element |
| kind | No | let |
No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" |
"primary" |
Specify the kind of button |
| size | No | let |
No | "default" | "field" | "small" | "lg" | "xl" |
"default" |
Specify the size of button |
| expressive | No | let |
No | boolean |
false |
Set to true to use Carbon's expressive typesetting |
| isSelected | No | let |
No | boolean |
false |
Set to true to enable the selected state for an icon-only, ghost button |
| icon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render Alternatively, use the named slot "icon" (e.g., <Icon slot="icon" size="{20}" />) |
| iconDescription | No | let |
No | string |
undefined |
Specify the ARIA label for the button icon |
| tooltipAlignment | No | let |
No | "start" | "center" | "end" |
"center" |
Set the alignment of the tooltip relative to the icon. Only applies to icon-only buttons |
| tooltipPosition | No | let |
No | "top" | "right" | "bottom" | "left" |
"bottom" |
Set the position of the tooltip relative to the icon |
| as | No | let |
No | boolean |
false |
Set to true to render a custom HTML elementProps are destructured as props in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) |
| skeleton | No | let |
No | boolean |
false |
Set to true to display the skeleton state |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the button |
| href | No | let |
No | string |
undefined |
Set the href to use an anchor link |
| tabindex | No | let |
No | string |
"0" |
Specify the tabindex |
| type | No | let |
No | string |
"button" |
Specify the type attribute for the button element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | { props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } |
-- |
| icon | No | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
ButtonSet
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| stacked | No | let |
No | boolean |
false |
Set to true to stack the buttons vertically |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
ButtonSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| href | No | let |
No | string |
undefined |
Set the href to use an anchor link |
| size | No | let |
No | "default" | "field" | "small" | "lg" | "xl" |
"default" |
Specify the size of button skeleton |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Checkbox
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| title | No | let |
Yes | string |
undefined |
Specify the title attribute for the label element |
| indeterminate | No | let |
Yes | boolean |
false |
Specify whether the checkbox is indeterminate |
| group | No | let |
Yes | ReadonlyArray |
undefined |
Specify the bound group |
| checked | No | let |
Yes | boolean |
false |
Specify whether the checkbox is checked |
| value | No | let |
No | any |
"" |
Specify the value of the checkbox |
| skeleton | No | let |
No | boolean |
false |
Set to true to display the skeleton state |
| required | No | let |
No | boolean |
false |
Set to true to mark the field as required |
| readonly | No | let |
No | boolean |
false |
Set to true for the checkbox to be read-only |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the checkbox |
| labelText | No | let |
No | string |
"" |
Specify the label text |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| name | No | let |
No | string |
"" |
Set a name for the input element |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input label |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| check | dispatched | boolean |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
CheckboxSkeleton
Props
None.
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
ClickableTile
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| clicked | No | let |
Yes | boolean |
false |
Set to true to click the tile |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the tile |
| href | No | let |
No | string |
undefined |
Set the href |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| keydown | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
CodeSnippet
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLPreElement |
null |
Obtain a reference to the pre HTML element |
| showMoreLess | No | let |
Yes | boolean |
true |
Set to false to hide the show more/less buttonNOTE: this prop only works with the type="multi" variant |
| expanded | No | let |
Yes | boolean |
false |
Set to true to expand a multi-line code snippet (type="multi") |
| type | No | let |
No | "single" | "inline" | "multi" |
"single" |
Set the type of code snippet |
| code | No | let |
No | string |
undefined |
Set the code snippet text. Alternatively, use the default slot (e.g., <CodeSnippet>{code}</CodeSnippet>).NOTE: you must use the code prop for the copy-to-clipboard functionality. |
| copy | No | let |
No | (code: string) => void |
async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } } |
By default, this component uses navigator.clipboard.writeText API to copy text to the user's clipboard.Provide a custom function to override this behavior. |
| hideCopyButton | No | let |
No | boolean |
false |
Set to true to hide the copy button |
| disabled | No | let |
No | boolean |
false |
Set to true for the disabled variant.Only applies to the "single", "multi" types |
| wrapText | No | let |
No | boolean |
false |
Set to true to wrap the text.NOTE: this prop only works with the type="multi" variant |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| skeleton | No | let |
No | boolean |
false |
Set to true to display the skeleton state |
| copyButtonDescription | No | let |
No | string |
undefined |
Specify the ARIA label for the copy button icon |
| copyLabel | No | let |
No | string |
undefined |
Specify the ARIA label of the copy button |
| feedback | No | let |
No | string |
"Copied!" |
Specify the feedback text displayed when clicking the snippet |
| feedbackTimeout | No | let |
No | number |
2000 |
Set the timeout duration (ms) to display feedback text |
| showLessText | No | let |
No | string |
"Show less" |
Specify the show less text. NOTE: this prop only works with the type="multi" variant |
| showMoreText | No | let |
No | string |
"Show more" |
Specify the show more text NOTE: this prop only works with the type="multi" variant |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the code element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | {code} |
Events
| Event name | Type | Detail |
|---|---|---|
| expand | dispatched | null |
| collapse | dispatched | null |
| copy | dispatched | null |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| animationend | forwarded | -- |
CodeSnippetSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| type | No | let |
No | "single" | "multi" |
"single" |
Set the type of code snippet |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Column
Types
export type ColumnSize = boolean | number;
export interface ColumnSizeDescriptor {
span?: ColumnSize;
offset: number;
}
export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| as | No | let |
No | boolean |
false |
Set to true to render a custom HTML elementProps are destructured as props in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>) |
| noGutter | No | let |
No | boolean |
false |
Set to true to remove the gutter |
| noGutterLeft | No | let |
No | boolean |
false |
Set to true to remove the left gutter |
| noGutterRight | No | let |
No | boolean |
false |
Set to true to remove the right gutter |
| padding | No | let |
No | boolean |
false |
Set to true to add top and bottom padding to the column |
| aspectRatio | No | let |
No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" |
undefined |
Specify the aspect ratio of the column |
| sm | No | let |
No | ColumnBreakpoint |
undefined |
Set the small breakpoint |
| md | No | let |
No | ColumnBreakpoint |
undefined |
Set the medium breakpoint |
| lg | No | let |
No | ColumnBreakpoint |
undefined |
Set the large breakpoint |
| xlg | No | let |
No | ColumnBreakpoint |
undefined |
Set the extra large breakpoint |
| max | No | let |
No | ColumnBreakpoint |
undefined |
Set the maximum breakpoint |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | {props: { class: string; [key: string]: any; }} |
-- |
Events
None.
ComboBox
Types
export type ComboBoxItemId = any;
export interface ComboBoxItem {
id: ComboBoxItemId;
text: string;
disabled?: boolean;
}
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| listRef | No | let |
Yes | null | HTMLDivElement |
null |
Obtain a reference to the list HTML element |
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| open | No | let |
Yes | boolean |
false |
Set to true to open the combobox menu dropdown |
| value | No | let |
Yes | string |
"" |
Specify the selected combobox value |
| selectedId | No | let |
Yes | ComboBoxItemId |
undefined |
Set the selected item by value id |
| items | No | let |
No | ReadonlyArray |
[] |
Set the combobox items |
| itemToString | No | let |
No | (item: ComboBoxItem) => string |
(item) => item.text || item.id |
Override the display of a combobox item |
| direction | No | let |
No | "bottom" | "top" |
"bottom" |
Specify the direction of the combobox dropdown menu |
| size | No | let |
No | "sm" | "xl" |
undefined |
Set the size of the combobox |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the combobox |
| titleText | No | let |
No | string |
"" |
Specify the title text of the combobox |
| placeholder | No | let |
No | string |
"" |
Specify the placeholder text |
| helperText | No | let |
No | string |
"" |
Specify the helper text |
| invalidText | No | let |
No | string |
"" |
Specify the invalid state text |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| warn | No | let |
No | boolean |
false |
Set to true to indicate an warning state |
| warnText | No | let |
No | string |
"" |
Specify the warning state text |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| shouldFilterItem | No | let |
No | (item: ComboBoxItem, value: string) => boolean |
() => true |
Determine if an item should be filtered given the current combobox value |
| translateWithId | No | let |
No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string |
undefined |
Override the chevron icon label based on the open state. Defaults to "Open menu" when closed and "Close menu" when open |
| translateWithIdSelection | No | let |
No | (id: "clearSelection") => string |
undefined |
Override the label of the clear button when the input has a selection. Defaults to "Clear selected item" since a combo box can only have on selection. |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the list box component |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the input |
| clear | No | function |
No | (options?: { focus?: boolean; }) => void |
() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = ""; if (options?.focus !== false) ref?.focus(); } |
Clear the combo box programmatically |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | { item: ComboBoxItem; index: number } |
{itemToString(item)} |
| titleText | No | -- | {titleText} |
Events
| Event name | Type | Detail |
|---|---|---|
| select | dispatched | { selectedId: ComboBoxItemId; selectedItem: ComboBoxItem } |
| clear | dispatched | KeyboardEvent | MouseEvent |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
| scroll | forwarded | -- |
ComposedModal
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLDivElement |
null |
Obtain a reference to the top-level HTML element |
| open | No | let |
Yes | boolean |
false |
Set to true to open the modal |
| size | No | let |
No | "xs" | "sm" | "lg" |
undefined |
Set the size of the composed modal |
| danger | No | let |
No | boolean |
false |
Set to true to use the danger variant |
| preventCloseOnClickOutside | No | let |
No | boolean |
false |
Set to true to prevent the modal from closing when clicking outside |
| containerClass | No | let |
No | string |
"" |
Specify a class for the inner modal |
| selectorPrimaryFocus | No | let |
No | null | string |
"[data-modal-primary-focus]" |
Specify a selector to be focused when opening the modal |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| transitionend | dispatched | { open: boolean; } |
| keydown | forwarded | -- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| submit | dispatched | null |
| click:button--primary | dispatched | null |
| close | dispatched | null |
| open | dispatched | null |
Content
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| id | No | let |
No | string |
"main-content" |
Specify the id for the main element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
ContentSwitcher
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| selectedIndex | No | let |
Yes | number |
0 |
Set the selected index of the switch item |
| size | No | let |
No | "sm" | "xl" |
undefined |
Specify the size of the content switcher |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| change | dispatched | number |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
ContextMenu
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLUListElement |
null |
Obtain a reference to the unordered list HTML element |
| y | No | let |
Yes | number |
0 |
Specify the vertical offset of the menu position |
| x | No | let |
Yes | number |
0 |
Specify the horizontal offset of the menu position |
| open | No | let |
Yes | boolean |
false |
Set to true to open the menuEither x and y must be greater than zero |
| target | No | let |
No | null | ReadonlyArray<null | HTMLElement> |
null |
Specify an element or list of elements to trigger the context menu. If no element is specified, the context menu applies to the entire window |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| open | dispatched | HTMLElement |
| click | forwarded | -- |
| keydown | forwarded | -- |
| close | dispatched | null |
ContextMenuDivider
Props
None.
Slots
None.
Events
None.
ContextMenuGroup
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| selectedIds | No | let |
Yes | ReadonlyArray |
[] |
-- |
| labelText | No | let |
No | string |
"" |
Specify the label text |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
ContextMenuOption
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLLIElement |
null |
Obtain a reference to the list item HTML element |
| selectable | No | let |
Yes | boolean |
false |
Set to true to enable the selectable variantAutomatically set to true if selected is true |
| selected | No | let |
Yes | boolean |
false |
Set to true to use the selected variant |
| icon | No | let |
Yes | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render Icon is rendered to the left of the label text |
| indented | No | let |
Yes | boolean |
false |
Set to true to indent the label |
| kind | No | let |
No | "default" | "danger" |
"default" |
Specify the kind of option |
| disabled | No | let |
No | boolean |
false |
Set to true to enable the disabled state |
| labelText | No | let |
No | string |
"" |
Specify the label text. Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) |
| shortcutText | No | let |
No | string |
"" |
Specify the shortcut text. Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>) |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Specify the id It's recommended to provide an id as a value to bind to within a selectable/radio menu group |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| icon | No | -- | <svelte:component this="{icon}" /> |
| labelText | No | -- | {labelText} |
| shortcutText | No | -- | {shortcutText} |
Events
| Event name | Type | Detail |
|---|---|---|
| keydown | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| click | dispatched | null |
ContextMenuRadioGroup
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| selectedId | No | let |
Yes | string |
"" |
Set the selected radio group id |
| labelText | No | let |
No | string |
"" |
Specify the label text |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
CopyButton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| feedback | No | let |
No | string |
"Copied!" |
Set the feedback text shown after clicking the button |
| feedbackTimeout | No | let |
No | number |
2000 |
Set the timeout duration (ms) to display feedback text |
| iconDescription | No | let |
No | string |
"Copy to clipboard" |
Set the title and ARIA label for the copy button |
| text | Yes | let |
No | string |
undefined |
Specify the text to copy |
| copy | No | let |
No | (text: string) => void |
async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } } |
Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| animationend | forwarded | -- |
| copy | dispatched | null |
DataTable
Types
export type DataTableKey = string;
export type DataTableValue = any;
export interface DataTableEmptyHeader {
key: DataTableKey;
empty: boolean;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean;
width?: string;
minWidth?: string;
}
export interface DataTableNonEmptyHeader {
key: DataTableKey;
value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean;
width?: string;
minWidth?: string;
}
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
export interface DataTableRow {
id: any;
[key: string]: DataTableValue;
}
export type DataTableRowId = any;
export interface DataTableCell {
key: DataTableKey;
value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
}
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| selectedRowIds | No | let |
Yes | ReadonlyArray |
[] |
Specify the row ids to be selected |
| selectable | No | let |
Yes | boolean |
false |
Set to true for the selectable variantAutomatically set to true if radio or batchSelection are true |
| expandedRowIds | No | let |
Yes | ReadonlyArray |
[] |
Specify the row ids to be expanded |
| expandable | No | let |
Yes | boolean |
false |
Set to true for the expandable variantAutomatically set to true if batchExpansion is true |
| sortDirection | No | let |
Yes | "none" | "ascending" | "descending" |
"none" |
Specify the sort direction |
| sortKey | No | let |
Yes | DataTableKey |
null |
Specify the header key to sort by |
| headers | No | let |
No | ReadonlyArray |
[] |
Specify the data table headers |
| rows | No | let |
No | ReadonlyArray |
[] |
Specify the rows the data table should render keys defined in headers are used for the row ids |
| size | No | let |
No | "compact" | "short" | "medium" | "tall" |
undefined |
Set the size of the data table |
| title | No | let |
No | string |
"" |
Specify the title of the data table |
| description | No | let |
No | string |
"" |
Specify the description of the data table |
| zebra | No | let |
No | boolean |
false |
Set to true to use zebra styles |
| sortable | No | let |
No | boolean |
false |
Set to true for the sortable variant |
| batchExpansion | No | let |
No | boolean |
false |
Set to true to enable batch expansion |
| nonExpandableRowIds | No | let |
No | ReadonlyArray |
[] |
Specify the ids for rows that should not be expandable |
| radio | No | let |
No | boolean |
false |
Set to true for the radio selection variant |
| batchSelection | No | let |
No | boolean |
false |
Set to true to enable batch selection |
| nonSelectableRowIds | No | let |
No | ReadonlyArray |
[] |
Specify the ids of rows that should not be selectable |
| stickyHeader | No | let |
No | boolean |
false |
Set to true to enable a sticky header |
| useStaticWidth | No | let |
No | boolean |
false |
Set to true to use static width |
| pageSize | No | let |
No | number |
0 |
Specify the number of items to display in a page |
| page | No | let |
No | number |
0 |
Set to number to set current page |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| cell | No | { row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } |
{cell.display ? cell.display(cell.value, row) : cell.value} |
| cell-header | No | { header: DataTableNonEmptyHeader; } |
{header.value} |
| description | No | -- | {description} |
| expanded-row | No | { row: DataTableRow; } |
-- |
| title | No | -- | {title} |
Events
| Event name | Type | Detail |
|---|---|---|
| click | dispatched | { header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; } |
| click:header--expand | dispatched | { expanded: boolean; } |
| click:header | dispatched | { header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" } |
| click:header--select | dispatched | { indeterminate: boolean; selected: boolean; } |
| click:row | dispatched | DataTableRow |
| mouseenter:row | dispatched | DataTableRow |
| mouseleave:row | dispatched | DataTableRow |
| click:row--expand | dispatched | { expanded: boolean; row: DataTableRow; } |
| click:row--select | dispatched | { selected: boolean; row: DataTableRow; } |
| click:cell | dispatched | DataTableCell |
DataTableSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| columns | No | let |
No | number |
5 |
Specify the number of columns Superseded by headers if headers is a non-empty array |
| rows | No | let |
No | number |
5 |
Specify the number of rows |
| size | No | let |
No | "compact" | "short" | "tall" |
undefined |
Set the size of the data table |
| zebra | No | let |
No | boolean |
false |
Set to true to apply zebra styles to the datatable rows |
| showHeader | No | let |
No | boolean |
true |
Set to false to hide the header |
| headers | No | let |
No | ReadonlyArray<string | Partial> |
[] |
Set the column headers Supersedes columns if value is a non-empty array |
| showToolbar | No | let |
No | boolean |
true |
Set to false to hide the toolbar |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
DatePicker
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| valueTo | No | let |
Yes | string |
"" |
Specify the date picker end date value (to) Only works with the "range" date picker type |
| valueFrom | No | let |
Yes | string |
"" |
Specify the date picker start date value (from) Only works with the "range" date picker type |
| value | No | let |
Yes | number | string |
"" |
Specify the date picker input value |
| datePickerType | No | let |
No | "simple" | "single" | "range" |
"simple" |
Specify the date picker type |
| dateFormat | No | let |
No | string |
"m/d/Y" |
Specify the date format |
| maxDate | No | let |
No | null | string | Date |
null |
Specify the maximum date |
| minDate | No | let |
No | null | string | Date |
null |
Specify the minimum date |
| locale | No | let |
No | import("flatpickr/dist/types/locale").CustomLocale | import("flatpickr/dist/types/locale").key |
"en" |
Specify the locale |
| short | No | let |
No | boolean |
false |
Set to true to use the short variant |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the date picker element |
| flatpickrProps | No | let |
No | import("flatpickr/dist/types/options").Options |
{ static: true } |
Override the options passed to the Flatpickr instance. @see https://flatpickr.js.org/options |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| change | dispatched | string | { selectedDates: [dateFrom: Date, dateTo?: Date]; dateStr: string | { from: string; to: string; } } |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
DatePickerInput
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| size | No | let |
No | "sm" | "xl" |
undefined |
Set the size of the input |
| type | No | let |
No | string |
"text" |
Specify the input type |
| placeholder | No | let |
No | string |
"" |
Specify the input placeholder text |
| pattern | No | let |
No | string |
"\d{1,2}\/\d{1,2}\/\d{4}" |
Specify the Regular Expression for the input value |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the input |
| helperText | No | let |
No | string |
"" |
Specify the helper text |
| iconDescription | No | let |
No | string |
"" |
Specify the ARIA label for the calendar icon |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input element |
| labelText | No | let |
No | string |
"" |
Specify the label text |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| invalidText | No | let |
No | string |
"" |
Specify the invalid state text |
| warn | No | let |
No | boolean |
false |
Set to true to indicate an warning state |
| warnText | No | let |
No | string |
"" |
Specify the warning state text |
| name | No | let |
No | string |
undefined |
Set a name for the input element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
DatePickerSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| range | No | let |
No | boolean |
false |
Set to true to use the range variant |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id to be used by the label element |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Dropdown
Types
export type DropdownItemId = any;
export type DropdownItemText = string;
export interface DropdownItem {
id: DropdownItemId;
text: DropdownItemText;
disabled?: boolean;
}
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLButtonElement |
null |
Obtain a reference to the button HTML element |
| open | No | let |
Yes | boolean |
false |
Set to true to open the dropdown |
| selectedId | Yes | let |
Yes | DropdownItemId |
undefined |
Specify the selected item id |
| items | No | let |
No | ReadonlyArray |
[] |
Set the dropdown items |
| itemToString | No | let |
No | (item: DropdownItem) => string |
(item) => item.text || item.id |
Override the display of a dropdown item |
| type | No | let |
No | "default" | "inline" |
"default" |
Specify the type of dropdown |
| direction | No | let |
No | "bottom" | "top" |
"bottom" |
Specify the direction of the dropdown menu |
| size | No | let |
No | "sm" | "lg" | "xl" |
undefined |
Specify the size of the dropdown field |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the dropdown |
| titleText | No | let |
No | string |
"" |
Specify the title text |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| invalidText | No | let |
No | string |
"" |
Specify the invalid state text |
| warn | No | let |
No | boolean |
false |
Set to true to indicate an warning state |
| warnText | No | let |
No | string |
"" |
Specify the warning state text |
| helperText | No | let |
No | string |
"" |
Specify the helper text |
| label | No | let |
No | string |
undefined |
Specify the list box label |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| translateWithId | No | let |
No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string |
undefined |
Override the chevron icon label based on the open state. Defaults to "Open menu" when closed and "Close menu" when open |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the list box component |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the list box |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | { item: DropdownItem; index: number; } |
{itemToString(item)} |
Events
| Event name | Type | Detail |
|---|---|---|
| select | dispatched | { selectedId: DropdownItemId, selectedItem: DropdownItem } |
DropdownSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| inline | No | let |
No | boolean |
false |
Set to true to use the inline variant |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
ExpandableTile
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLButtonElement |
null |
Obtain a reference to the top-level element |
| tilePadding | No | let |
Yes | number |
0 |
Specify the padding of the tile (number of pixels) |
| tileMaxHeight | No | let |
Yes | number |
0 |
Specify the max height of the tile (number of pixels) |
| expanded | No | let |
Yes | boolean |
false |
Set to true to expand the tile |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| tileCollapsedIconText | No | let |
No | string |
"Interact to expand Tile" |
Specify the icon text of the collapsed tile |
| tileExpandedIconText | No | let |
No | string |
"Interact to collapse Tile" |
Specify the icon text of the expanded tile |
| tileExpandedLabel | No | let |
No | string |
"" |
Specify the icon label of the expanded tile |
| tileCollapsedLabel | No | let |
No | string |
"" |
Specify the icon label of the collapsed tile |
| tabindex | No | let |
No | string |
"0" |
Specify the tabindex |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the top-level div element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| above | No | -- | -- |
| below | No | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| keypress | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
FileUploader
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| files | No | let |
Yes | ReadonlyArray |
[] |
Obtain a reference to the uploaded files |
| status | No | let |
No | "uploading" | "edit" | "complete" |
"uploading" |
Specify the file uploader status |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the file uploader |
| accept | No | let |
No | ReadonlyArray |
[] |
Specify the accepted file types |
| multiple | No | let |
No | boolean |
false |
Set to true to allow multiple files |
| clearFiles | No | const |
No | () => void |
() => { files = []; } |
Programmatically clear the uploaded files |
| labelTitle | No | let |
No | string |
"" |
Specify the label title. Alternatively, use the named slot "labelTitle" (e.g., <span slot="labelTitle">...</span>) |
| labelDescription | No | let |
No | string |
"" |
Specify the label description. Alternatively, use the named slot "labelDescription" (e.g., <span slot="labelDescription">...</span>) |
| kind | No | let |
No | import("../Button/Button.svelte").ButtonProps["kind"] |
"primary" |
Specify the kind of file uploader button |
| size | No | let |
No | import("../Button/Button.svelte").ButtonProps["size"] |
"small" |
Specify the size of the file uploader button |
| buttonLabel | No | let |
No | string |
"" |
Specify the button label |
| iconDescription | No | let |
No | string |
"Provide icon description" |
Specify the ARIA label used for the status icons |
| name | No | let |
No | string |
"" |
Specify a name attribute for the file button uploader input |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| labelDescription | No | -- | {labelDescription} |
| labelTitle | No | -- | {labelTitle} |
Events
| Event name | Type | Detail |
|---|---|---|
| add | dispatched | ReadonlyArray |
| remove | dispatched | ReadonlyArray |
| change | dispatched | ReadonlyArray |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
FileUploaderButton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| labelText | No | let |
Yes | string |
"Add file" |
Specify the label text |
| files | No | let |
Yes | ReadonlyArray |
[] |
Obtain a reference to the uploaded files |
| accept | No | let |
No | ReadonlyArray |
[] |
Specify the accepted file types |
| multiple | No | let |
No | boolean |
false |
Set to true to allow multiple files |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the input |
| disableLabelChanges | No | let |
No | boolean |
false |
Set to true to disable label changes |
| kind | No | let |
No | import("../Button/Button.svelte").ButtonProps["kind"] |
"primary" |
Specify the kind of file uploader button |
| size | No | let |
No | import("../Button/Button.svelte").ButtonProps["size"] |
"small" |
Specify the size of the file uploader button |
| role | No | let |
No | string |
"button" |
Specify the label role |
| tabindex | No | let |
No | string |
"0" |
Specify tabindex attribute |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input element |
| name | No | let |
No | string |
"" |
Specify a name attribute for the input |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| change | dispatched | ReadonlyArray |
| keydown | forwarded | -- |
| click | forwarded | -- |
FileUploaderDropContainer
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| files | No | let |
Yes | ReadonlyArray |
[] |
Obtain a reference to the uploaded files |
| accept | No | let |
No | ReadonlyArray |
[] |
Specify the accepted file types |
| multiple | No | let |
No | boolean |
false |
Set to true to allow multiple files |
| validateFiles | No | let |
No | (files: ReadonlyArray) => ReadonlyArray |
(files) => files |
Override the default behavior of validating uploaded files. By default, files are not validated |
| labelText | No | let |
No | string |
"Add file" |
Specify the label text |
| role | No | let |
No | string |
"button" |
Specify the role attribute of the drop container |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the input |
| tabindex | No | let |
No | string |
"0" |
Specify tabindex attribute |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input element |
| name | No | let |
No | string |
"" |
Specify a name attribute for the input |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| add | dispatched | ReadonlyArray |
| change | dispatched | ReadonlyArray |
| dragover | forwarded | -- |
| dragleave | forwarded | -- |
| drop | forwarded | -- |
| keydown | forwarded | -- |
| click | forwarded | -- |
FileUploaderItem
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| status | No | let |
No | "uploading" | "edit" | "complete" |
"uploading" |
Specify the file uploader status |
| size | No | let |
No | "default" | "field" | "small" |
"default" |
Specify the size of button skeleton |
| iconDescription | No | let |
No | string |
"" |
Specify the ARIA label used for the status icons |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| errorSubject | No | let |
No | string |
"" |
Specify the error subject text |
| errorBody | No | let |
No | string |
"" |
Specify the error body text |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the top-level element |
| name | No | let |
No | string |
"" |
Specify the file uploader name |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| delete | dispatched | string |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
FileUploaderSkeleton
Props
None.
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Filename
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| status | No | let |
No | "uploading" | "edit" | "complete" |
"uploading" |
Specify the file name status |
| iconDescription | No | let |
No | string |
"" |
Specify the ARIA label used for the status icons |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| keydown | forwarded | -- |
FluidForm
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| keydown | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| submit | forwarded | -- |
Form
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLFormElement |
null |
Obtain a reference to the form element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| keydown | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| submit | forwarded | -- |
FormGroup
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| noMargin | No | let |
No | boolean |
false |
Set to true for to remove the bottom margin |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| message | No | let |
No | boolean |
false |
Set to true to render a form requirement |
| messageText | No | let |
No | string |
"" |
Specify the message text |
| legendText | No | let |
No | string |
"" |
Specify the legend text |
| legendId | No | let |
No | string |
"" |
Specify an id for the legend element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
FormItem
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
FormLabel
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id to be used by the label element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Grid
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| as | No | let |
No | boolean |
false |
Set to true to render a custom HTML elementProps are destructured as props in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>) |
| condensed | No | let |
No | boolean |
false |
Set to true to use the condensed variant |
| narrow | No | let |
No | boolean |
false |
Set to true to use the narrow variant |
| fullWidth | No | let |
No | boolean |
false |
Set to true to use the fullWidth variant |
| noGutter | No | let |
No | boolean |
false |
Set to true to remove the gutter |
| noGutterLeft | No | let |
No | boolean |
false |
Set to true to remove the left gutter |
| noGutterRight | No | let |
No | boolean |
false |
Set to true to remove the right gutter |
| padding | No | let |
No | boolean |
false |
Set to true to add top and bottom padding to all columns |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | { props: { class: string; [key: string]: any; } } |
-- |
Events
None.
Header
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLAnchorElement |
null |
Obtain a reference to the HTML anchor element |
| isSideNavOpen | No | let |
Yes | boolean |
false |
Set to true to open the side nav |
| expandedByDefault | No | let |
No | boolean |
true |
Set to false to hide the side nav by default |
| uiShellAriaLabel | No | let |
No | string |
undefined |
Specify the ARIA label for the header |
| href | No | let |
No | string |
undefined |
Specify the href attribute |
| company | No | let |
No | string |
undefined |
Specify the company name. Alternatively, use the named slot "company" (e.g., <span slot="company">...</span>) |
| platformName | No | let |
No | string |
"" |
Specify the platform name. Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) |
| persistentHamburgerMenu | No | let |
No | boolean |
false |
Set to true to persist the hamburger menu |
| expansionBreakpoint | No | let |
No | number |
1056 |
The window width (px) at which the SideNav is expanded and the hamburger menu is hidden. 1056 represents the "large" breakpoint in pixels from the Carbon Design System: - small: 320 - medium: 672 - large: 1056 - x-large: 1312 - max: 1584 |
| iconMenu | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render for the closed state. Defaults to <Menu size={20} /> |
| iconClose | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render for the opened state. Defaults to <Close size={20} /> |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| company | No | -- | {company} |
| platform | No | -- | {platformName} |
| skip-to-content | No | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
HeaderAction
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLButtonElement |
null |
Obtain a reference to the button HTML element |
| isOpen | No | let |
Yes | boolean |
false |
Set to true to open the panel |
| icon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render when the action panel is closed. Defaults to <Switcher size={20} /> |
| closeIcon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render when the action panel is open. Defaults to <Close size={20} /> |
| text | No | let |
No | string |
undefined |
Specify the text. Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) |
| transition | No | let |
No | false | import("svelte/transition").SlideParams |
{ duration: 200 } |
Customize the panel transition (i.e., transition:slide).Set to false to disable the transition |
| preventCloseOnClickOutside | No | let |
No | boolean |
false |
Set to true to prevent the panel from closing when clicking outside |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| closeIcon | No | -- | <svelte:component this="{closeIcon}" size="{20}" /> |
| icon | No | -- | <svelte:component this="{icon}" size="{20}" /> |
| text | No | -- | {#if text}<span class:bx--header__action-text="{true}">{text}</span>{/if} |
Events
| Event name | Type | Detail |
|---|---|---|
| open | dispatched | null |
| close | dispatched | null |
| click | forwarded | -- |
HeaderActionLink
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLAnchorElement |
null |
Obtain a reference to the HTML anchor element |
| linkIsActive | No | let |
No | boolean |
false |
Set to true to use the active state |
| href | No | let |
No | string |
undefined |
Specify the href attribute |
| icon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| icon | No | -- | <svelte:component this="{icon}" size="{20}" /> |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
HeaderGlobalAction
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | HTMLButtonElement |
null |
Obtain a reference to the HTML button element |
| isActive | No | let |
No | boolean |
false |
Set to true to use the active variant |
| icon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
HeaderNav
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
HeaderNavItem
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLAnchorElement |
null |
Obtain a reference to the HTML anchor element |
| href | No | let |
No | string |
undefined |
Specify the href attribute |
| text | No | let |
No | string |
undefined |
Specify the text |
| isSelected | No | let |
No | boolean |
false |
Set to true to select the item |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | {text} |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keyup | forwarded | -- |
| keydown | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
HeaderNavMenu
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLAnchorElement |
null |
Obtain a reference to the HTML anchor element |
| expanded | No | let |
Yes | boolean |
false |
Set to true to toggle the expanded state |
| href | No | let |
No | string |
"/" |
Specify the href attribute |
| text | No | let |
No | string |
undefined |
Specify the text |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| keydown | forwarded | -- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
HeaderPanelDivider
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
HeaderPanelLink
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLAnchorElement |
null |
Obtain a reference to the HTML anchor element |
| href | No | let |
No | string |
undefined |
Specify the href attribute |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
HeaderPanelLinks
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
HeaderSearch
Types
export interface HeaderSearchResult {
href: string;
text: string;
description?: string;
}
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| selectedResultIndex | No | let |
Yes | number |
0 |
Specify the selected result index |
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| active | No | let |
Yes | boolean |
false |
Set to true to activate and focus the search bar |
| value | No | let |
Yes | string |
"" |
Specify the search input value |
| results | No | let |
No | ReadonlyArray |
[] |
Render a list of search results |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | { result: HeaderSearchResult; index: number } |
{result.text} |
Events
| Event name | Type | Detail |
|---|---|---|
| active | dispatched | null |
| inactive | dispatched | null |
| clear | dispatched | null |
| select | dispatched | { value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult } |
| change | forwarded | -- |
| input | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| keydown | forwarded | -- |
| paste | forwarded | -- |
HeaderUtilities
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
ImageLoader
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| error | No | let |
Yes | boolean |
false |
Set to true if an error occurs when loading the image |
| loaded | No | let |
Yes | boolean |
false |
Set to true when the image is loaded |
| loading | No | let |
Yes | boolean |
false |
Set to true when loaded is true and error is false |
| src | No | let |
No | string |
"" |
Specify the image source |
| alt | No | let |
No | string |
"" |
Specify the image alt text |
| ratio | No | let |
No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" |
undefined |
Specify the aspect ratio for the image wrapper |
| fadeIn | No | let |
No | boolean |
false |
Set to true to fade in the image on loadThe duration uses the fast-02 value following Carbon guidelines on motion |
| loadImage | No | const |
No | (url?: string) => void |
(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } |
Method invoked to load the image provided a src value |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| error | No | -- | -- |
| loading | No | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| load | dispatched | null |
| error | dispatched | null |
InlineLoading
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| status | No | let |
No | "active" | "inactive" | "finished" | "error" |
"active" |
Set the loading status |
| description | No | let |
No | string |
undefined |
Set the loading description |
| iconDescription | No | let |
No | string |
undefined |
Specify a description for the loading icon. Defaults to the status prop for the "error" and "finished" states |
| successDelay | No | let |
No | number |
1500 |
Specify the timeout delay (ms) after status is set to "success" |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| success | dispatched | null |
InlineNotification
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| kind | No | let |
No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" |
"error" |
Specify the kind of notification |
| lowContrast | No | let |
No | boolean |
false |
Set to true to use the low contrast variant |
| timeout | No | let |
No | number |
0 |
Set the timeout duration (ms) to hide the notification after opening it |
| role | No | let |
No | string |
"alert" |
Set the role attribute |
| title | No | let |
No | string |
"" |
Specify the title text |
| subtitle | No | let |
No | string |
"" |
Specify the subtitle text |
| hideCloseButton | No | let |
No | boolean |
false |
Set to true to hide the close button |
| statusIconDescription | No | let |
No | string |
kind + " icon" |
Specify the ARIA label for the status icon |
| closeButtonDescription | No | let |
No | string |
"Close notification" |
Specify the ARIA label for the close button |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| actions | No | -- | -- |
| subtitle | No | -- | {subtitle} |
| title | No | -- | {title} |
Events
| Event name | Type | Detail |
|---|---|---|
| close | dispatched | { timeout: boolean } |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Link
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLAnchorElement |
null |
Obtain a reference to the top-level HTML element |
| size | No | let |
No | "sm" | "lg" |
undefined |
Specify the size of the link |
| href | No | let |
No | string |
undefined |
Specify the href value |
| inline | No | let |
No | boolean |
false |
Set to true to use the inline variant |
| icon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to renderinline must be false |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the checkbox |
| visited | No | let |
No | boolean |
false |
Set to true to allow visited styles |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| icon | No | -- | <svelte:component this="{icon}" /> |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
ListBox
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| size | No | let |
No | "sm" | "xl" |
undefined |
Set the size of the list box |
| type | No | let |
No | "default" | "inline" |
"default" |
Set the type of the list box |
| open | No | let |
No | boolean |
false |
Set to true to open the list box |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the list box |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| invalidText | No | let |
No | string |
"" |
Specify the invalid state text |
| warn | No | let |
No | boolean |
false |
Set to true to indicate an warning state |
| warnText | No | let |
No | string |
"" |
Specify the warning state text |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| keydown | forwarded | -- |
| click | forwarded | -- |
ListBoxField
Types
export type ListBoxFieldTranslationId = "close" | "open";
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLDivElement |
null |
Obtain a reference to the top-level HTML element |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the list box field |
| role | No | let |
No | string |
"combobox" |
Specify the role attribute |
| tabindex | No | let |
No | string |
"-1" |
Specify the tabindex |
| translationIds | No | const |
No | { close: "close", open: "open" } |
{ close: "close", open: "open" } |
Default translation ids |
| translateWithId | No | let |
No | (id: ListBoxFieldTranslationId) => string |
(id) => defaultTranslations[id] |
Override the default translation ids |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the top-level element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
ListBoxMenu
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLDivElement |
null |
Obtain a reference to the HTML element |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the top-level element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| scroll | forwarded | -- |
ListBoxMenuIcon
Types
export type ListBoxMenuIconTranslationId = "close" | "open";
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| open | No | let |
No | boolean |
false |
Set to true to open the list box menu icon |
| translationIds | No | const |
No | { close: "close", open: "open" } |
{ close: "close", open: "open" } |
Default translation ids |
| translateWithId | No | let |
No | (id: ListBoxMenuIconTranslationId) => string |
(id) => defaultTranslations[id] |
Override the default translation ids |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
ListBoxMenuItem
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| active | No | let |
No | boolean |
false |
Set to true to enable the active state |
| highlighted | No | let |
No | boolean |
false |
Set to true to enable the highlighted state |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the menu item |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
ListBoxSelection
Types
export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLDivElement |
null |
Obtain a reference to the top-level HTML element |
| selectionCount | No | let |
No | number |
undefined |
Specify the number of selected items |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the list box selection |
| translationIds | No | const |
No | { clearAll: "clearAll", clearSelection: "clearSelection", } |
{ clearAll: "clearAll", clearSelection: "clearSelection", } |
Default translation ids |
| translateWithId | No | let |
No | (id: ListBoxSelectionTranslationId) => string |
(id) => defaultTranslations[id] |
Override the default translation ids |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| clear | dispatched | KeyboardEvent | MouseEvent |
ListItem
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Loading
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| small | No | let |
No | boolean |
false |
Set to true to use the small variant |
| active | No | let |
No | boolean |
true |
Set to false to disable the active state |
| withOverlay | No | let |
No | boolean |
true |
Set to false to disable the overlay |
| description | No | let |
No | string |
"loading" |
Specify the description to describe the loading state |
Slots
None.
Events
None.
LocalStorage
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| value | No | let |
Yes | any |
"" |
Provide a value to persist |
| key | No | let |
No | string |
"local-storage-key" |
Specify the local storage key |
| clearItem | No | function |
No | () => void |
() => { localStorage.removeItem(key); } |
Remove the persisted key value from the browser's local storage |
| clearAll | No | function |
No | () => void |
() => { localStorage.clear(); } |
Clear all key values from the browser's local storage |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| save | dispatched | null |
| update | dispatched | { prevValue: any; value: any; } |
Modal
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLDivElement |
null |
Obtain a reference to the top-level HTML element |
| open | No | let |
Yes | boolean |
false |
Set to true to open the modal |
| size | No | let |
No | "xs" | "sm" | "lg" |
undefined |
Set the size of the modal |
| danger | No | let |
No | boolean |
false |
Set to true to use the danger variant |
| alert | No | let |
No | boolean |
false |
Set to true to enable alert mode |
| passiveModal | No | let |
No | boolean |
false |
Set to true to use the passive variant |
| modalHeading | No | let |
No | string |
undefined |
Specify the modal heading |
| modalLabel | No | let |
No | string |
undefined |
Specify the modal label |
| modalAriaLabel | No | let |
No | string |
undefined |
Specify the ARIA label for the modal |
| iconDescription | No | let |
No | string |
"Close the modal" |
Specify the ARIA label for the close icon |
| hasForm | No | let |
No | boolean |
false |
Set to true if the modal contains form elements |
| hasScrollingContent | No | let |
No | boolean |
false |
Set to true if the modal contains scrolling content |
| primaryButtonText | No | let |
No | string |
"" |
Specify the primary button text |
| primaryButtonDisabled | No | let |
No | boolean |
false |
Set to true to disable the primary button |
| primaryButtonIcon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the primary button icon |
| shouldSubmitOnEnter | No | let |
No | boolean |
true |
Set to true for the "submit" and "click:button--primary" eventsto be dispatched when pressing "Enter" |
| secondaryButtonText | No | let |
No | string |
"" |
Specify the secondary button text |
| secondaryButtons | No | let |
No | [{ text: string; }, { text: string; }] |
[] |
2-tuple prop to render two secondary buttons for a 3 button modal supersedes secondaryButtonText |
| selectorPrimaryFocus | No | let |
No | string |
"[data-modal-primary-focus]" |
Specify a selector to be focused when opening the modal |
| preventCloseOnClickOutside | No | let |
No | boolean |
false |
Set to true to prevent the modal from closing when clicking outside |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the top-level element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| heading | No | -- | {modalHeading} |
| label | No | -- | {modalLabel} |
Events
| Event name | Type | Detail |
|---|---|---|
| transitionend | dispatched | { open: boolean; } |
| click:button--secondary | dispatched | { text: string; } |
| keydown | forwarded | -- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| submit | dispatched | null |
| click:button--primary | dispatched | null |
| close | dispatched | null |
| open | dispatched | null |
ModalBody
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| hasForm | No | let |
No | boolean |
false |
Set to true if the modal contains form elements |
| hasScrollingContent | No | let |
No | boolean |
false |
Set to true if the modal contains scrolling content |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
ModalFooter
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| primaryButtonText | No | let |
No | string |
"" |
Specify the primary button text |
| primaryButtonIcon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the primary button icon |
| primaryButtonDisabled | No | let |
No | boolean |
false |
Set to true to disable the primary button |
| primaryClass | No | let |
No | string |
undefined |
Specify a class for the primary button |
| secondaryButtonText | No | let |
No | string |
"" |
Specify the secondary button text |
| secondaryButtons | No | let |
No | [{ text: string; }, { text: string; }] |
[] |
2-tuple prop to render two secondary buttons for a 3 button modal supersedes secondaryButtonText |
| secondaryClass | No | let |
No | string |
undefined |
Specify a class for the secondary button |
| danger | No | let |
No | boolean |
false |
Set to true to use the danger variant |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click:button--secondary | dispatched | { text: string; } |
ModalHeader
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| title | No | let |
No | string |
"" |
Specify the modal title |
| label | No | let |
No | string |
"" |
Specify the modal label |
| labelClass | No | let |
No | string |
"" |
Specify the label class |
| titleClass | No | let |
No | string |
"" |
Specify the title class |
| closeClass | No | let |
No | string |
"" |
Specify the close class |
| closeIconClass | No | let |
No | string |
"" |
Specify the close icon class |
| iconDescription | No | let |
No | string |
"Close" |
Specify the ARIA label for the close icon |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
MultiSelect
Types
export type MultiSelectItemId = any;
export type MultiSelectItemText = string;
export interface MultiSelectItem {
id: MultiSelectItemId;
text: MultiSelectItemText;
disabled?: boolean;
}
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| highlightedId | No | let |
Yes | null | MultiSelectItemId |
null |
Id of the highlighted ListBoxMenuItem |
| selectionRef | No | let |
Yes | null | HTMLDivElement |
null |
Obtain a reference to the selection element |
| fieldRef | No | let |
Yes | null | HTMLDivElement |
null |
Obtain a reference to the field box element |
| multiSelectRef | No | let |
Yes | null | HTMLDivElement |
null |
Obtain a reference to the outer div element |
| inputRef | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| open | No | let |
Yes | boolean |
false |
Set to true to open the dropdown |
| value | No | let |
Yes | string |
"" |
Specify the multiselect value |
| selectedIds | No | let |
Yes | ReadonlyArray |
[] |
Set the selected ids |
| items | No | let |
No | ReadonlyArray |
[] |
Set the multiselect items |
| itemToString | No | let |
No | (item: MultiSelectItem) => any |
(item) => item.text || item.id |
Override the display of a multiselect item |
| itemToInput | No | let |
No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string } |
(item) => {} |
Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
| size | No | let |
No | "sm" | "lg" | "xl" |
undefined |
Set the size of the combobox |
| type | No | let |
No | "default" | "inline" |
"default" |
Specify the type of multiselect |
| direction | No | let |
No | "bottom" | "top" |
"bottom" |
Specify the direction of the multiselect dropdown menu |
| selectionFeedback | No | let |
No | "top" | "fixed" | "top-after-reopen" |
"top-after-reopen" |
Specify the selection feedback after selecting items |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the dropdown |
| filterable | No | let |
No | boolean |
false |
Set to true to filter items |
| filterItem | No | let |
No | (item: MultiSelectItem, value: string) => boolean |
(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) |
Override the filtering logic The default filtering is an exact string comparison |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| locale | No | let |
No | string |
"en" |
Specify the locale |
| placeholder | No | let |
No | string |
"" |
Specify the placeholder text |
| sortItem | No | let |
No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) |
(a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) |
Override the sorting logic The default sorting compare the item text value |
| translateWithId | No | let |
No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string |
undefined |
Override the chevron icon label based on the open state. Defaults to "Open menu" when closed and "Close menu" when open |
| translateWithIdSelection | No | let |
No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string |
undefined |
Override the label of the clear button when the input has a selection. Defaults to "Clear selected item" and "Clear all items" if more than one item is selected |
| titleText | No | let |
No | string |
"" |
Specify the title text |
| useTitleInItem | No | let |
No | boolean |
false |
Set to true to pass the item to itemToString in the checkbox |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| invalidText | No | let |
No | string |
"" |
Specify the invalid state text |
| warn | No | let |
No | boolean |
false |
Set to true to indicate an warning state |
| warnText | No | let |
No | string |
"" |
Specify the warning state text |
| helperText | No | let |
No | string |
"" |
Specify the helper text |
| label | No | let |
No | string |
"" |
Specify the list box label |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the list box component |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the select |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | { item: MultiSelectItem; index: number } |
{itemToString(item)} |
| titleText | No | -- | {titleText} |
Events
| Event name | Type | Detail |
|---|---|---|
| select | dispatched | { selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; } |
| clear | dispatched | null |
| blur | dispatched | FocusEvent | CustomEvent |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| paste | forwarded | -- |
NotificationActionButton
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
NotificationButton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| notificationType | No | let |
No | "toast" | "inline" |
"toast" |
Set the type of notification |
| icon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render |
| title | No | let |
No | string |
undefined |
Specify the title of the icon |
| iconDescription | No | let |
No | string |
"Close icon" |
Specify the ARIA label for the icon |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
NotificationIcon
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| kind | No | let |
No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" |
"error" |
Specify the kind of notification icon |
| notificationType | No | let |
No | "toast" | "inline" |
"toast" |
Set the type of notification |
| iconDescription | Yes | let |
No | -- | undefined |
Specify the ARIA label for the icon |
Slots
None.
Events
None.
NumberInput
Types
export type NumberInputTranslationId = "increment" | "decrement";
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| value | No | let |
Yes | null | number |
null |
Specify the input value. Use null to denote "no value" |
| size | No | let |
No | "sm" | "xl" |
undefined |
Set the size of the input |
| step | No | let |
No | number |
1 |
Specify the step increment |
| max | No | let |
No | number |
undefined |
Specify the maximum value |
| min | No | let |
No | number |
undefined |
Specify the minimum value |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| readonly | No | let |
No | boolean |
false |
Set to true for the input to be read-only |
| allowEmpty | No | let |
No | boolean |
false |
Set to true to allow for an empty value |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the input |
| hideSteppers | No | let |
No | boolean |
false |
Set to true to hide the input stepper buttons |
| iconDescription | No | let |
No | string |
"" |
Specify the ARIA label for the increment icons |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| invalidText | No | let |
No | string |
"" |
Specify the invalid state text |
| warn | No | let |
No | boolean |
false |
Set to true to indicate an warning state |
| warnText | No | let |
No | string |
"" |
Specify the warning state text |
| helperText | No | let |
No | string |
"" |
Specify the helper text |
| label | No | let |
No | string |
"" |
Specify the label text |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| translateWithId | No | let |
No | (id: NumberInputTranslationId) => string |
(id) => defaultTranslations[id] |
Override the default translation ids |
| translationIds | No | const |
No | { increment: "increment"; decrement: "decrement" } |
{ increment: "increment", decrement: "decrement", } |
Default translation ids |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input element |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the input |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| label | No | -- | {label} |
Events
| Event name | Type | Detail |
|---|---|---|
| change | dispatched | null | number |
| input | dispatched | null | number |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
NumberInputSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| hideLabel | No | let |
No | boolean |
false |
Set to true to hide the label text |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
OrderedList
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| nested | No | let |
No | boolean |
false |
Set to true to use the nested variant |
| native | No | let |
No | boolean |
false |
Set to true to use native list styles |
| expressive | No | let |
No | boolean |
false |
Set to true to use Carbon's expressive typesetting |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
OutboundLink
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
OverflowMenu
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| menuRef | No | let |
Yes | null | HTMLUListElement |
null |
Obtain a reference to the overflow menu element |
| buttonRef | No | let |
Yes | null | HTMLButtonElement |
null |
Obtain a reference to the trigger button element |
| icon | No | let |
Yes | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render. Defaults to <OverflowMenuVertical /> |
| open | No | let |
Yes | boolean |
false |
Set to true to open the menu |
| size | No | let |
No | "sm" | "xl" |
undefined |
Specify the size of the overflow menu |
| direction | No | let |
No | "top" | "bottom" |
"bottom" |
Specify the direction of the overflow menu relative to the button |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| flipped | No | let |
No | boolean |
false |
Set to true to flip the menu relative to the button |
| menuOptionsClass | No | let |
No | string |
undefined |
Specify the menu options class |
| iconClass | No | let |
No | string |
undefined |
Specify the icon class |
| iconDescription | No | let |
No | string |
"Open and close list of options" |
Specify the ARIA label for the icon |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the button element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| menu | No | -- | <svelte:component |
Events
| Event name | Type | Detail |
|---|---|---|
| close | dispatched | null | { index: number; text: string; } |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
OverflowMenuItem
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLAnchorElement | HTMLButtonElement |
null |
Obtain a reference to the HTML element |
| primaryFocus | No | let |
Yes | boolean |
false |
Set to true if the item should be focused when opening the menu |
| text | No | let |
No | string |
"Provide text" |
Specify the item text. Alternatively, use the default slot |
| href | No | let |
No | string |
"" |
Specify the href attribute if the item is a link |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the item |
| hasDivider | No | let |
No | boolean |
false |
Set to true to include a divider |
| danger | No | let |
No | boolean |
false |
Set to true to use the danger variant |
| requireTitle | No | let |
No | boolean |
true |
Set to false to omit the button title attribute |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the top-level element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | <div class:bx--overflow-menu-options__option-content="{true}"> |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| keydown | forwarded | -- |
Pagination
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| pageSize | No | let |
Yes | number |
10 |
Specify the number of items to display in a page |
| page | No | let |
Yes | number |
1 |
Specify the current page index |
| totalItems | No | let |
No | number |
0 |
Specify the total number of items |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the pagination |
| forwardText | No | let |
No | string |
"Next page" |
Specify the forward button text |
| backwardText | No | let |
No | string |
"Previous page" |
Specify the backward button text |
| itemsPerPageText | No | let |
No | string |
"Items per page:" |
Specify the items per page text |
| itemText | No | let |
No | (min: number, max: number) => string |
(min, max) => `${min}–${max} item${max === 1 ? "" : "s"}` |
Override the item text |
| itemRangeText | No | let |
No | (min: number, max: number, total: number) => string |
(min, max, total) => `${min}–${max} of ${total} item${max === 1 ? "" : "s"}` |
Override the item range text |
| pageInputDisabled | No | let |
No | boolean |
false |
Set to true to disable the page input |
| pageSizeInputDisabled | No | let |
No | boolean |
false |
Set to true to disable the page size input |
| pageSizes | No | let |
No | ReadonlyArray |
[10] |
Specify the available page sizes |
| pagesUnknown | No | let |
No | boolean |
false |
Set to true if the number of pages is unknown |
| pageText | No | let |
No | (page: number) => string |
(page) => `page ${page}` |
Override the page text |
| pageRangeText | No | let |
No | (current: number, total: number) => string |
(current, total) => `of ${total} page${total === 1 ? "" : "s"}` |
Override the page range text |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the top-level element |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| change | dispatched | { page?: number; pageSize?: number } |
| click:button--previous | dispatched | { page: number; } |
| click:button--next | dispatched | { page: number; } |
| update | dispatched | { pageSize: number; page: number; } |
PaginationNav
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| page | No | let |
Yes | number |
1 |
Specify the current page index |
| total | No | let |
No | number |
10 |
Specify the total number of pages |
| shown | No | let |
No | number |
10 |
Specify the total number of pages to show |
| loop | No | let |
No | boolean |
false |
Set to true to loop the navigation |
| forwardText | No | let |
No | string |
"Next page" |
Specify the forward button text |
| backwardText | No | let |
No | string |
"Previous page" |
Specify the backward button text |
| tooltipPosition | No | let |
No | "top" | "right" | "bottom" | "left" | "outside" | "inside" |
"bottom" |
Set the position of the tooltip relative to the pagination buttons. |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| change | dispatched | { page: number; } |
| click:button--previous | dispatched | { page: number; } |
| click:button--next | dispatched | { page: number; } |
PaginationSkeleton
Props
None.
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
PasswordInput
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| type | No | let |
Yes | "text" | "password" |
"password" |
Set to "text" to toggle the password visibility |
| value | No | let |
Yes | number | string |
"" |
Specify the input value |
| size | No | let |
No | "sm" | "xl" |
undefined |
Set the size of the input |
| placeholder | No | let |
No | string |
"" |
Specify the placeholder text |
| hidePasswordLabel | No | let |
No | string |
"Hide password" |
Specify the hide password label text |
| showPasswordLabel | No | let |
No | string |
"Show password" |
Specify the show password label text |
| tooltipAlignment | No | let |
No | "start" | "center" | "end" |
"center" |
Set the alignment of the tooltip relative to the icon |
| tooltipPosition | No | let |
No | "top" | "right" | "bottom" | "left" |
"bottom" |
Set the position of the tooltip relative to the icon |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the input |
| helperText | No | let |
No | string |
"" |
Specify the helper text |
| labelText | No | let |
No | string |
"" |
Specify the label text |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| invalidText | No | let |
No | string |
"" |
Specify the text for the invalid state |
| warn | No | let |
No | boolean |
false |
Set to true to indicate an warning state |
| warnText | No | let |
No | string |
"" |
Specify the warning state text |
| inline | No | let |
No | boolean |
false |
Set to true to use inline version |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input element |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the input |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
Popover
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| open | No | let |
Yes | boolean |
false |
Set to true to display the popover |
| closeOnOutsideClick | No | let |
No | boolean |
false |
Set to true to close the popover on an outside click |
| caret | No | let |
No | boolean |
false |
Set to true render a caret |
| align | No | let |
No | "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" |
"top" |
Specify the alignment of the caret |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| highContrast | No | let |
No | boolean |
false |
Set to true to enable the high contrast variant |
| relative | No | let |
No | boolean |
false |
Set to true to use a relative position |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click:outside | dispatched | { target: HTMLElement; } |
ProgressBar
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| value | No | let |
No | number |
undefined |
Specify the current value |
| max | No | let |
No | number |
100 |
Specify the maximum value |
| kind | No | let |
No | "default" | "inline" | "indented" |
"default" |
Specify the kind of progress bar |
| status | No | let |
No | "active" | "finished" | "error" |
"active" |
Specify the status |
| size | No | let |
No | "sm" | "md" |
"md" |
Specify the size |
| labelText | No | let |
No | string |
"" |
Specify the label text |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| helperText | No | let |
No | string |
"" |
Specify the helper text |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the progress bar element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| labelText | No | -- | {labelText} |
Events
None.
ProgressIndicator
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| currentIndex | No | let |
Yes | number |
0 |
Specify the current step index |
| vertical | No | let |
No | boolean |
false |
Set to true to use the vertical variant |
| spaceEqually | No | let |
No | boolean |
false |
Set to true to specify whether the progress steps should be split equally in size in the div |
| preventChangeOnClick | No | let |
No | boolean |
false |
Set to true to prevent currentIndex from updating |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| change | dispatched | number |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
ProgressIndicatorSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| vertical | No | let |
No | boolean |
false |
Set to true to use the vertical variant |
| count | No | let |
No | number |
4 |
Specify the number of steps to render |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
ProgressStep
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| current | No | let |
Yes | boolean |
false |
Set to true to use the current variant |
| complete | No | let |
Yes | boolean |
false |
Set to true for the complete variant |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the progress step |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| description | No | let |
No | string |
"" |
Specify the step description |
| label | No | let |
No | string |
"" |
Specify the step label |
| secondaryLabel | No | let |
No | string |
"" |
Specify the step secondary label |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the top-level element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | { props: { class: 'bx--progress-label' } } |
<p class:bx--progress-label="{true}">{label}</p> |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
RadioButton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| checked | No | let |
Yes | boolean |
false |
Set to true to check the radio button |
| value | No | let |
No | string | number |
"" |
Specify the value of the radio button |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the radio button |
| required | No | let |
No | boolean |
false |
Set to true to mark the field as required |
| labelPosition | No | let |
No | "right" | "left" |
"right" |
Specify the label position |
| labelText | No | let |
No | string |
"" |
Specify the label text |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input element |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the radio button input |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| change | forwarded | -- |
RadioButtonGroup
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| selected | No | let |
Yes | string | number |
undefined |
Set the selected radio button value |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the radio buttons |
| required | No | let |
No | boolean |
undefined |
Set to true to require the selection of a radio button |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the radio button inputs |
| legendText | No | let |
No | string |
"" |
Specify the legend text |
| hideLegend | No | let |
No | boolean |
false |
Set to true to visually hide the legend |
| labelPosition | No | let |
No | "right" | "left" |
"right" |
Specify the label position |
| orientation | No | let |
No | "horizontal" | "vertical" |
"horizontal" |
Specify the orientation of the radio buttons |
| id | No | let |
No | string |
undefined |
Set an id for the container div element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| legendText | No | -- | {legendText} |
Events
| Event name | Type | Detail |
|---|---|---|
| change | dispatched | string | number |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
RadioButtonSkeleton
Props
None.
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
RadioTile
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| checked | No | let |
Yes | boolean |
false |
Set to true to check the tile |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the tile |
| required | No | let |
No | boolean |
false |
Set to true to mark the field as required |
| value | No | let |
No | string |
"" |
Specify the value of the radio input |
| tabindex | No | let |
No | string |
"0" |
Specify the tabindex |
| iconDescription | No | let |
No | string |
"Tile checkmark" |
Specify the ARIA label for the radio tile checkmark icon |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input element |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the radio tile input |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| change | forwarded | -- |
| keydown | forwarded | -- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
RecursiveList
Types
export interface RecursiveListNode {
text?: string;
href?: string;
html?: string;
}
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| nodes | No | let |
No | Array<RecursiveListNode & { nodes?: RecursiveListNode[]; }> |
[] |
Specify the nodes to render |
| type | No | let |
No | "unordered" | "ordered" | "ordered-native" |
"unordered" |
Specify the type of list to render |
Slots
None.
Events
None.
Row
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| as | No | let |
No | boolean |
false |
Set to true to render a custom HTML elementProps are destructured as props in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>) |
| condensed | No | let |
No | boolean |
false |
Set to true to use the condensed variant |
| narrow | No | let |
No | boolean |
false |
Set to true to use the narrow variant |
| noGutter | No | let |
No | boolean |
false |
Set to true to remove the gutter |
| noGutterLeft | No | let |
No | boolean |
false |
Set to true to remove the left gutter |
| noGutterRight | No | let |
No | boolean |
false |
Set to true to remove the right gutter |
| padding | No | let |
No | boolean |
false |
Set to true to add top and bottom padding to all columns |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | { props: { class: string; [key: string]: any; } } |
-- |
Events
None.
Search
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| expanded | No | let |
Yes | boolean |
false |
Set to `true to expand the search input |
| value | No | let |
Yes | any |
"" |
Specify the value of the search input |
| size | No | let |
No | "sm" | "lg" | "xl" |
"xl" |
Specify the size of the search input |
| searchClass | No | let |
No | string |
"" |
Specify the class name passed to the outer div element |
| skeleton | No | let |
No | boolean |
false |
Set to true to display the skeleton state |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the search input |
| expandable | No | let |
No | boolean |
false |
Set to true to enable the expandable variant |
| placeholder | No | let |
No | string |
"Search..." |
Specify the placeholder attribute of the search input |
| autocomplete | No | let |
No | "on" | "off" |
"off" |
Specify the autocomplete attribute |
| autofocus | No | let |
No | boolean |
false |
Set to true to auto focus the search element |
| closeButtonLabelText | No | let |
No | string |
"Clear search input" |
Specify the close button label text |
| labelText | No | let |
No | string |
"" |
Specify the label text |
| icon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render. Defaults to <Search /> |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| expand | dispatched | null |
| collapse | dispatched | null |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| paste | forwarded | -- |
| clear | dispatched | null |
SearchSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| size | No | let |
No | "sm" | "lg" | "xl" |
"xl" |
Specify the size of the search input |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Select
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLSelectElement |
null |
Obtain a reference to the select HTML element |
| selected | No | let |
Yes | string | number |
undefined |
Specify the selected item value |
| size | No | let |
No | "sm" | "xl" |
undefined |
Set the size of the select input |
| inline | No | let |
No | boolean |
false |
Set to true to use the inline variant |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the select element |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the select element |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the select element |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| invalidText | No | let |
No | string |
"" |
Specify the invalid state text |
| warn | No | let |
No | boolean |
false |
Set to true to indicate an warning state |
| warnText | No | let |
No | string |
"" |
Specify the warning state text |
| helperText | No | let |
No | string |
"" |
Specify the helper text |
| noLabel | No | let |
No | boolean |
false |
Set to true to not render a label |
| labelText | No | let |
No | string |
"" |
Specify the label text |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| required | No | let |
No | boolean |
false |
Set to true to mark the field as required |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| update | dispatched | string | number |
| change | forwarded | -- |
| input | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
SelectItem
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| value | No | let |
No | string | number |
"" |
Specify the option value |
| text | No | let |
No | string |
"" |
Specify the option text |
| hidden | No | let |
No | boolean |
false |
Set to true to hide the option |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the option |
| class | No | let |
No | string |
undefined |
Specify the class of the option element |
| style | No | let |
No | string |
undefined |
Specify the style of the option element |
Slots
None.
Events
None.
SelectItemGroup
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| disabled | No | let |
No | boolean |
false |
Set to true to disable the optgroup element |
| label | No | let |
No | string |
"Provide label" |
Specify the label attribute of the optgroup element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
SelectSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| hideLabel | No | let |
No | boolean |
false |
Set to true to hide the label text |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
SelectableTile
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| selected | No | let |
Yes | boolean |
false |
Set to true to select the tile |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the tile |
| title | No | let |
No | string |
"title" |
Specify the title of the selectable tile |
| value | No | let |
No | string |
"value" |
Specify the value of the selectable tile |
| tabindex | No | let |
No | string |
"0" |
Specify the tabindex |
| iconDescription | No | let |
No | string |
"Tile checkmark" |
Specify the ARIA label for the selectable tile checkmark icon |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input element |
| name | No | let |
No | string |
"" |
Specify a name attribute for the input |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| select | dispatched | string |
| deselect | dispatched | string |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
SideNav
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| isOpen | No | let |
Yes | boolean |
false |
Set to true to toggle the expanded state |
| fixed | No | let |
No | boolean |
false |
Set to true to use the fixed variant |
| rail | No | let |
No | boolean |
false |
Set to true to use the rail variant |
| ariaLabel | No | let |
No | string |
undefined |
Specify the ARIA label for the nav |
| expansionBreakpoint | No | let |
No | number |
1056 |
The window width (px) at which the SideNav is expanded and the hamburger menu is hidden. 1056 represents the "large" breakpoint in pixels from the Carbon Design System: - small: 320 - medium: 672 - large: 1056 - x-large: 1312 - max: 1584 |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| open | dispatched | null |
| close | dispatched | null |
| click:overlay | dispatched | null |
SideNavDivider
Props
None.
Slots
None.
Events
None.
SideNavItems
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
SideNavLink
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLAnchorElement |
null |
Obtain a reference to the HTML anchor element |
| isSelected | No | let |
No | boolean |
false |
Set to true to select the current link |
| href | No | let |
No | string |
undefined |
Specify the href attribute |
| text | No | let |
No | string |
undefined |
Specify the text |
| icon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | {text} |
| icon | No | -- | <svelte:component this="{icon}" /> |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
SideNavMenu
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLButtonElement |
null |
Obtain a reference to the HTML button element |
| expanded | No | let |
Yes | boolean |
false |
Set to true to toggle the expanded state |
| text | No | let |
No | string |
undefined |
Specify the text |
| icon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| icon | No | -- | <svelte:component this="{icon}" /> |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
SideNavMenuItem
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLAnchorElement |
null |
Obtain a reference to the HTML anchor element |
| isSelected | No | let |
No | boolean |
false |
Set to true to select the item |
| href | No | let |
No | string |
undefined |
Specify the href attribute |
| text | No | let |
No | string |
undefined |
Specify the item text |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | {text} |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
SkeletonPlaceholder
Props
None.
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
SkeletonText
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| lines | No | let |
No | number |
3 |
Specify the number of lines to render |
| heading | No | let |
No | boolean |
false |
Set to true to use the heading size variant |
| paragraph | No | let |
No | boolean |
false |
Set to true to use the paragraph size variant |
| width | No | let |
No | string |
"100%" |
Specify the width of the text (% or px) |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
SkipToContent
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| href | No | let |
No | string |
"#main-content" |
Specify the href attribute |
| tabindex | No | let |
No | string |
"0" |
Specify the tabindex |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | Skip to main content |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
Slider
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLDivElement |
null |
Obtain a reference to the HTML element |
| value | No | let |
Yes | number |
0 |
Specify the value of the slider |
| max | No | let |
No | number |
100 |
Set the maximum slider value |
| maxLabel | No | let |
No | string |
"" |
Specify the label for the max value |
| min | No | let |
No | number |
0 |
Set the minimum slider value |
| minLabel | No | let |
No | string |
"" |
Specify the label for the min value |
| step | No | let |
No | number |
1 |
Set the step value |
| stepMultiplier | No | let |
No | number |
4 |
Set the step multiplier value |
| required | No | let |
No | boolean |
false |
Set to true to require a value |
| inputType | No | let |
No | string |
"number" |
Specify the input type |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the slider |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| hideTextInput | No | let |
No | boolean |
false |
Set to true to hide the text input |
| fullWidth | No | let |
No | boolean |
false |
Set to true for the slider to spanthe full width of its containing element. |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the slider div element |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| labelText | No | let |
No | string |
"" |
Specify the label text. Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| name | No | let |
No | string |
"" |
Set a name for the slider element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| change | dispatched | number |
| input | dispatched | number |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
SliderSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| hideLabel | No | let |
No | boolean |
false |
Set to true to hide the label text |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
StructuredList
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| selected | No | let |
Yes | string |
undefined |
Specify the selected structured list row value |
| condensed | No | let |
No | boolean |
false |
Set to true to use the condensed variant |
| flush | No | let |
No | boolean |
false |
Set to true to flush the list |
| selection | No | let |
No | boolean |
false |
Set to true to use the selection variant |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| change | dispatched | string |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
StructuredListBody
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
StructuredListCell
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| head | No | let |
No | boolean |
false |
Set to true to use as a header |
| noWrap | No | let |
No | boolean |
false |
Set to true to prevent wrapping |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
StructuredListHead
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
StructuredListInput
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| checked | No | let |
Yes | boolean |
false |
Set to true to check the input |
| title | No | let |
No | string |
"title" |
Specify the title of the input |
| value | No | let |
No | string |
"value" |
Specify the value of the input |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input element |
| name | No | let |
No | string |
"" |
Specify a name attribute for the input |
Slots
None.
Events
None.
StructuredListRow
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| head | No | let |
No | boolean |
false |
Set to true to use as a header |
| label | No | let |
No | boolean |
false |
Set to true to render a label slot |
| tabindex | No | let |
No | string |
"0" |
Specify the tabindex |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
StructuredListSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| rows | No | let |
No | number |
5 |
Specify the number of rows |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Switch
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLButtonElement |
null |
Obtain a reference to the button HTML element |
| selected | No | let |
Yes | boolean |
false |
Set to true for the switch to be selected |
| text | No | let |
No | string |
"Provide text" |
Specify the switch text. Alternatively, use the "text" slot (e.g., <span slot="text">...</span>) |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the switch |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the button element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | {text} |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
Tab
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLAnchorElement |
null |
Obtain a reference to the anchor HTML element |
| label | No | let |
No | string |
"" |
Specify the tab label. Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>) |
| href | No | let |
No | string |
"#" |
Specify the href attribute |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the tab |
| tabindex | No | let |
No | string |
"0" |
Specify the tabindex |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the top-level element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | {label} |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
TabContent
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the top-level element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
Table
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| size | No | let |
No | "compact" | "short" | "medium" | "tall" |
undefined |
Set the size of the table |
| zebra | No | let |
No | boolean |
false |
Set to true to use zebra styles |
| useStaticWidth | No | let |
No | boolean |
false |
Set to true to use static width |
| sortable | No | let |
No | boolean |
false |
Set to true for the sortable variant |
| stickyHeader | No | let |
No | boolean |
false |
Set to true to enable a sticky header |
| tableStyle | No | let |
No | string |
undefined |
Set the style attribute on the table element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
TableBody
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
TableCell
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
TableContainer
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| title | No | let |
No | string |
"" |
Specify the title of the data table |
| description | No | let |
No | string |
"" |
Specify the description of the data table |
| stickyHeader | No | let |
No | boolean |
false |
Set to true to enable a sticky header |
| useStaticWidth | No | let |
No | boolean |
false |
Set to true to use static width |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
TableHead
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
TableHeader
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| sortable | No | let |
No | boolean |
false |
Set to true for the sortable variant |
| sortDirection | No | let |
No | "none" | "ascending" | "descending" |
"none" |
Specify the sort direction |
| active | No | let |
No | boolean |
false |
Set to true if the column sorting |
| scope | No | let |
No | string |
"col" |
Specify the scope attribute |
| translateWithId | No | let |
No | () => string |
() => "" |
Override the default id translations |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the top-level element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| click | forwarded | -- |
TableRow
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Tabs
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| selected | No | let |
Yes | number |
0 |
Specify the selected tab index |
| type | No | let |
No | "default" | "container" |
"default" |
Specify the type of tabs |
| autoWidth | No | let |
No | boolean |
false |
Set to true for tabs to have an auto-width |
| iconDescription | No | let |
No | string |
"Show menu options" |
Specify the ARIA label for the chevron icon |
| triggerHref | No | let |
No | string |
"#" |
Specify the tab trigger href attribute |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| content | No | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| change | dispatched | number |
| keypress | forwarded | -- |
| click | forwarded | -- |
TabsSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| count | No | let |
No | number |
4 |
Specify the number of tabs to render |
| type | No | let |
No | "default" | "container" |
"default" |
Specify the type of tabs |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Tag
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| type | No | let |
No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline" |
undefined |
Specify the type of tag |
| size | No | let |
No | "sm" | "default" |
"default" |
-- |
| filter | No | let |
No | boolean |
false |
Set to true to use filterable variant |
| disabled | No | let |
No | boolean |
false |
Set to true to disable a filterable tag |
| interactive | No | let |
No | boolean |
false |
Set to true to render a button element instead of a div |
| skeleton | No | let |
No | boolean |
false |
Set to true to display the skeleton state |
| title | No | let |
No | string |
"Clear filter" |
Set the title for the close button in a filterable tag |
| icon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the filterable tag |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | { props: { class: 'bx--tag__label' } } |
-- |
| icon | No | -- | <svelte:component this="{icon}" /> |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| close | dispatched | null |
TagSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| size | No | let |
No | "sm" | "default" |
"default" |
-- |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
TextArea
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLTextAreaElement |
null |
Obtain a reference to the textarea HTML element |
| value | No | let |
Yes | null | string |
"" |
Specify the textarea value. |
| placeholder | No | let |
No | string |
"" |
Specify the placeholder text |
| cols | No | let |
No | number |
50 |
Specify the number of cols |
| rows | No | let |
No | number |
4 |
Specify the number of rows |
| maxCount | No | let |
No | number |
undefined |
Specify the max character count |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the input |
| readonly | No | let |
No | boolean |
false |
Set to true to use the read-only variant |
| helperText | No | let |
No | string |
"" |
Specify the helper text |
| labelText | No | let |
No | string |
"" |
Specify the label text |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| invalidText | No | let |
No | string |
"" |
Specify the text for the invalid state |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the textarea element |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the input |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
TextAreaSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
TextInput
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| value | No | let |
Yes | null | number | string |
"" |
Specify the input value.value will be set to null if type="number"and the value is empty. |
| size | No | let |
No | "sm" | "xl" |
undefined |
Set the size of the input |
| placeholder | No | let |
No | string |
"" |
Specify the placeholder text |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the input |
| helperText | No | let |
No | string |
"" |
Specify the helper text |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input element |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the input |
| labelText | No | let |
No | string |
"" |
Specify the label text |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| invalidText | No | let |
No | string |
"" |
Specify the invalid state text |
| warn | No | let |
No | boolean |
false |
Set to true to indicate an warning state |
| warnText | No | let |
No | string |
"" |
Specify the warning state text |
| required | No | let |
No | boolean |
false |
Set to true to mark the field as required |
| inline | No | let |
No | boolean |
false |
Set to true to use the inline variant |
| readonly | No | let |
No | boolean |
false |
Set to true to use the read-only variant |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| change | dispatched | null | number | string |
| input | dispatched | null | number | string |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
TextInputSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| hideLabel | No | let |
No | boolean |
false |
Set to true to hide the label text |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Theme
Types
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| theme | No | let |
Yes | CarbonTheme |
"white" |
Set the current Carbon theme |
| tokens | No | let |
No | { [token: string]: any; } |
{} |
Customize a theme with your own tokens @see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
| persist | No | let |
No | boolean |
false |
Set to true to persist the theme using window.localStorage |
| persistKey | No | let |
No | string |
"theme" |
Specify the local storage key |
| render | No | let |
No | "toggle" | "select" |
undefined |
Render a toggle or select dropdown to control the theme |
| toggle | No | let |
No | import("../Toggle/Toggle.svelte").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } |
{ themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } |
Override the default toggle props |
| select | No | let |
No | import("../Select/Select.svelte").SelectProps & { themes?: CarbonTheme[]; } |
{ themes: themeKeys, labelText: "Themes", hideLabel: false, } |
Override the default select props |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | { theme: CarbonTheme; } |
-- |
Events
| Event name | Type | Detail |
|---|---|---|
| update | dispatched | { theme: CarbonTheme; } |
Tile
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
TileGroup
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| selected | No | let |
Yes | string |
undefined |
Specify the selected tile value |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the tile group |
| required | No | let |
No | boolean |
undefined |
Set to true to require the selection of a radio button |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the radio button inputs |
| legend | No | let |
No | string |
"" |
Specify the legend text |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| select | dispatched | string |
TimePicker
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| value | No | let |
Yes | string |
"" |
Specify the input value |
| size | No | let |
No | "sm" | "xl" |
undefined |
Specify the size of the input |
| placeholder | No | let |
No | string |
"hh:mm" |
Specify the input placeholder text |
| pattern | No | let |
No | string |
"(1[012]|[1-9]):[0-5]0-9?" |
Specify the pattern attribute for the input element |
| maxlength | No | let |
No | number |
5 |
Specify the maxlength input attribute |
| light | No | let |
No | boolean |
false |
Set to true to enable the light variant |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the input |
| labelText | No | let |
No | string |
"" |
Specify the label text |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| invalid | No | let |
No | boolean |
false |
Set to true to indicate an invalid state |
| invalidText | No | let |
No | string |
"" |
Specify the invalid state text |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input element |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the input |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
TimePickerSelect
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLSelectElement |
null |
Obtain a reference to the select HTML element |
| value | No | let |
Yes | number | string |
"" |
Specify the select value |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the select |
| iconDescription | No | let |
No | string |
"Open list of options" |
Specify the ARIA label for the chevron icon |
| labelText | No | let |
No | string |
"" |
Specify the label text |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the select element |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the select element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
ToastNotification
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| kind | No | let |
No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" |
"error" |
Specify the kind of notification |
| lowContrast | No | let |
No | boolean |
false |
Set to true to use the low contrast variant |
| timeout | No | let |
No | number |
0 |
Set the timeout duration (ms) to hide the notification after opening it |
| role | No | let |
No | string |
"alert" |
Set the role attribute |
| title | No | let |
No | string |
"" |
Specify the title text |
| subtitle | No | let |
No | string |
"" |
Specify the subtitle text |
| caption | No | let |
No | string |
"" |
Specify the caption text |
| statusIconDescription | No | let |
No | string |
kind + " icon" |
Specify the ARIA label for the status icon |
| closeButtonDescription | No | let |
No | string |
"Close notification" |
Specify the ARIA label for the close button |
| hideCloseButton | No | let |
No | boolean |
false |
Set to true to hide the close button |
| fullWidth | No | let |
No | boolean |
false |
Set to true for the notification to spanthe full width of its containing element. |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| caption | No | -- | {caption} |
| subtitle | No | -- | {subtitle} |
| title | No | -- | {title} |
Events
| Event name | Type | Detail |
|---|---|---|
| close | dispatched | { timeout: boolean } |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Toggle
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| toggled | No | let |
Yes | boolean |
false |
Set to true to toggle the checkbox input |
| size | No | let |
No | "default" | "sm" |
"default" |
Specify the toggle size |
| disabled | No | let |
No | boolean |
false |
Set to true to disable checkbox input |
| labelA | No | let |
No | string |
"Off" |
Specify the label for the untoggled state |
| labelB | No | let |
No | string |
"On" |
Specify the label for the toggled state |
| labelText | No | let |
No | string |
"" |
Specify the label text |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input element |
| name | No | let |
No | string |
undefined |
Specify a name attribute for the checkbox input |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| labelA | No | -- | {labelA} |
| labelB | No | -- | {labelB} |
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| toggle | dispatched | { toggled: boolean; } |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
ToggleSkeleton
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| size | No | let |
No | "default" | "sm" |
"default" |
Specify the toggle size |
| labelText | No | let |
No | string |
"" |
Specify the label text |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the input element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
Toolbar
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| size | No | let |
No | "sm" | "default" |
"default" |
Specify the toolbar size |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
ToolbarBatchActions
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| active | No | let |
Yes | undefined | boolean |
undefined |
Use a boolean to show or hide the toolbar |
| formatTotalSelected | No | let |
No | (totalSelected: number) => string |
(totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected` |
Override the total items selected text |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| cancel | No | -- | Cancel |
Events
| Event name | Type | Detail |
|---|---|---|
| cancel | dispatched | null |
ToolbarContent
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
ToolbarMenu
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
ToolbarMenuItem
Props
None.
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| keydown | forwarded | -- |
ToolbarSearch
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLInputElement |
null |
Obtain a reference to the input HTML element |
| filteredRowIds | No | let |
Yes | ReadonlyArray<import("./DataTable.svelte").DataTableRowId> |
[] |
The filtered row ids |
| expanded | No | let |
Yes | boolean |
false |
Set to true to expand the search bar |
| value | No | let |
Yes | number | string |
"" |
Specify the value of the search input |
| persistent | No | let |
No | boolean |
false |
Set to true to keep the search bar expanded |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the search bar |
| shouldFilterRows | No | let |
No | boolean | ((row: import("./DataTable.svelte").DataTableRow, value: number | string) => boolean) |
false |
Set to true to filter table rows using the search value.If true, the default search excludes id, cells fields andonly does a basic comparison on string and number type cell values. To implement your own client-side filtering, pass a function that accepts a row and value and returns a boolean. |
| tabindex | No | let |
No | string |
"0" |
Specify the tabindex |
Slots
None.
Events
| Event name | Type | Detail |
|---|---|---|
| clear | dispatched | null |
| change | forwarded | -- |
| input | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| keyup | forwarded | -- |
| keydown | forwarded | -- |
| paste | forwarded | -- |
Tooltip
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| refIcon | No | let |
Yes | null | HTMLDivElement |
null |
Obtain a reference to the icon HTML element |
| refTooltip | No | let |
Yes | null | HTMLDivElement |
null |
Obtain a reference to the tooltip HTML element |
| ref | No | let |
Yes | null | HTMLDivElement |
null |
Obtain a reference to the trigger text HTML element |
| open | No | let |
Yes | boolean |
false |
Set to true to open the tooltip |
| align | No | let |
No | "start" | "center" | "end" |
"center" |
Set the alignment of the tooltip relative to the icon |
| direction | No | let |
No | "top" | "right" | "bottom" | "left" |
"bottom" |
Set the direction of the tooltip relative to the button |
| hideIcon | No | let |
No | boolean |
false |
Set to true to hide the tooltip icon |
| icon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render for the tooltip button. Default to <Information /> |
| iconDescription | No | let |
No | string |
"" |
Specify the ARIA label for the tooltip button |
| iconName | No | let |
No | string |
"" |
Specify the icon name attribute |
| tabindex | No | let |
No | string |
"0" |
Set the button tabindex |
| tooltipId | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the tooltip |
| triggerId | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the tooltip button |
| triggerText | No | let |
No | string |
"" |
Set the tooltip button text |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| icon | No | -- | <svelte:component this="{icon}" name="{iconName}" /> |
| triggerText | No | -- | {triggerText} |
Events
| Event name | Type | Detail |
|---|---|---|
| open | dispatched | null |
| close | dispatched | null |
| click | forwarded | -- |
| mousedown | forwarded | -- |
TooltipDefinition
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLButtonElement |
null |
Obtain a reference to the button HTML element |
| open | No | let |
Yes | boolean |
false |
Set to true to open the tooltip |
| tooltipText | No | let |
No | string |
"" |
Specify the tooltip text |
| align | No | let |
No | "start" | "center" | "end" |
"center" |
Set the alignment of the tooltip relative to the icon |
| direction | No | let |
No | "top" | "bottom" |
"bottom" |
Set the direction of the tooltip relative to the icon |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the tooltip div element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| tooltip | No | -- | {tooltipText} |
Events
| Event name | Type | Detail |
|---|---|---|
| open | dispatched | null |
| close | dispatched | null |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| focus | forwarded | -- |
TooltipFooter
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| selectorPrimaryFocus | No | let |
No | string |
"a[href], button:not([disabled])" |
Specify a selector to be focused inside the footer when opening the tooltip |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
TooltipIcon
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| ref | No | let |
Yes | null | HTMLButtonElement |
null |
Obtain a reference to the button HTML element |
| tooltipText | No | let |
No | string |
"" |
Specify the tooltip text. Alternatively, use the "tooltipText" slot |
| icon | No | let |
No | typeof import("svelte").SvelteComponent |
undefined |
Specify the icon to render |
| disabled | No | let |
No | boolean |
false |
Set to true to disable the tooltip icon |
| align | No | let |
No | "start" | "center" | "end" |
"center" |
Set the alignment of the tooltip relative to the icon |
| direction | No | let |
No | "top" | "right" | "bottom" | "left" |
"bottom" |
Set the direction of the tooltip relative to the icon |
| id | No | let |
No | string |
"ccs-" + Math.random().toString(36) |
Set an id for the span element |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | <svelte:component this="{icon}" /> |
| tooltipText | No | -- | {tooltipText} |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| focus | forwarded | -- |
TreeView
Types
export type TreeNodeId = string | number;
export interface TreeNode {
id: TreeNodeId;
text: any;
icon?: typeof import("svelte").SvelteComponent<any>;
disabled?: boolean;
nodes?: TreeNode[];
}
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| expandedIds | No | let |
Yes | ReadonlyArray |
[] |
Set the node ids to be expanded |
| selectedIds | No | let |
Yes | ReadonlyArray |
[] |
Set the node ids to be selected |
| activeId | No | let |
Yes | TreeNodeId |
"" |
Set the current active node id Only one node can be active |
| nodes | No | let |
Yes | Array |
[] |
Provide an array of nodes to render |
| size | No | let |
No | "default" | "compact" |
"default" |
Specify the TreeView size |
| labelText | No | let |
No | string |
"" |
Specify the label text |
| hideLabel | No | let |
No | boolean |
false |
Set to true to visually hide the label text |
| expandAll | No | function |
No | () => void |
() => { expandedIds = [...nodeIds]; } |
Programmatically expand all nodes |
| collapseAll | No | function |
No | () => void |
() => { expandedIds = []; } |
Programmatically collapse all nodes |
| expandNodes | No | function |
No | (filterId?: (node: TreeNode) => boolean) => void |
() => { expandedIds = nodes .filter( (node) => filterNode(node) || node.nodes?.some((child) => filterNode(child) && child.nodes) ) .map((node) => node.id); } |
Programmatically expand a subset of nodes. Expands all nodes if no argument is provided |
| collapseNodes | No | function |
No | (filterId?: (node: TreeNode) => boolean) => void |
() => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } |
Programmatically collapse a subset of nodes. Collapses all nodes if no argument is provided |
| showNode | No | function |
No | (id: TreeNodeId) => void |
() => { for (const child of nodes) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(`[id="${lastId}"]`)?.focus(); }); // Break out of the loop if the node is found. break; } } } |
Programmatically show a node by id.The matching node will be expanded, selected, and focused |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | { node: { id: TreeNodeId; text: string; expanded: boolean, leaf: boolean; disabled: boolean; selected: boolean; } } |
{node.text} |
| labelText | No | -- | {labelText} |
Events
| Event name | Type | Detail |
|---|---|---|
| select | dispatched | TreeNode & { expanded: boolean; leaf: boolean; } |
| toggle | dispatched | TreeNode & { expanded: boolean; leaf: boolean; } |
| focus | dispatched | TreeNode & { expanded: boolean; leaf: boolean; } |
| keydown | forwarded | -- |
Truncate
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| clamp | No | let |
No | "end" | "front" |
"end" |
-- |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
UnorderedList
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| nested | No | let |
No | boolean |
false |
Set to true to use the nested variant |
| expressive | No | let |
No | boolean |
false |
Set to true to use Carbon's expressive typesetting |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |