# Component Index > 165 components exported from carbon-components-svelte@0.85.3. ## Components - [`Accordion`](#accordion) - [`AccordionItem`](#accordionitem) - [`AccordionSkeleton`](#accordionskeleton) - [`AspectRatio`](#aspectratio) - [`Breadcrumb`](#breadcrumb) - [`BreadcrumbItem`](#breadcrumbitem) - [`BreadcrumbSkeleton`](#breadcrumbskeleton) - [`Breakpoint`](#breakpoint) - [`Button`](#button) - [`ButtonSet`](#buttonset) - [`ButtonSkeleton`](#buttonskeleton) - [`Checkbox`](#checkbox) - [`CheckboxSkeleton`](#checkboxskeleton) - [`ClickableTile`](#clickabletile) - [`CodeSnippet`](#codesnippet) - [`CodeSnippetSkeleton`](#codesnippetskeleton) - [`Column`](#column) - [`ComboBox`](#combobox) - [`ComposedModal`](#composedmodal) - [`Content`](#content) - [`ContentSwitcher`](#contentswitcher) - [`ContextMenu`](#contextmenu) - [`ContextMenuDivider`](#contextmenudivider) - [`ContextMenuGroup`](#contextmenugroup) - [`ContextMenuOption`](#contextmenuoption) - [`ContextMenuRadioGroup`](#contextmenuradiogroup) - [`CopyButton`](#copybutton) - [`DataTable`](#datatable) - [`DataTableSkeleton`](#datatableskeleton) - [`DatePicker`](#datepicker) - [`DatePickerInput`](#datepickerinput) - [`DatePickerSkeleton`](#datepickerskeleton) - [`Dropdown`](#dropdown) - [`DropdownSkeleton`](#dropdownskeleton) - [`ExpandableTile`](#expandabletile) - [`FileUploader`](#fileuploader) - [`FileUploaderButton`](#fileuploaderbutton) - [`FileUploaderDropContainer`](#fileuploaderdropcontainer) - [`FileUploaderItem`](#fileuploaderitem) - [`FileUploaderSkeleton`](#fileuploaderskeleton) - [`Filename`](#filename) - [`FluidForm`](#fluidform) - [`Form`](#form) - [`FormGroup`](#formgroup) - [`FormItem`](#formitem) - [`FormLabel`](#formlabel) - [`Grid`](#grid) - [`Header`](#header) - [`HeaderAction`](#headeraction) - [`HeaderActionLink`](#headeractionlink) - [`HeaderGlobalAction`](#headerglobalaction) - [`HeaderNav`](#headernav) - [`HeaderNavItem`](#headernavitem) - [`HeaderNavMenu`](#headernavmenu) - [`HeaderPanelDivider`](#headerpaneldivider) - [`HeaderPanelLink`](#headerpanellink) - [`HeaderPanelLinks`](#headerpanellinks) - [`HeaderSearch`](#headersearch) - [`HeaderUtilities`](#headerutilities) - [`ImageLoader`](#imageloader) - [`InlineLoading`](#inlineloading) - [`InlineNotification`](#inlinenotification) - [`Link`](#link) - [`ListBox`](#listbox) - [`ListBoxField`](#listboxfield) - [`ListBoxMenu`](#listboxmenu) - [`ListBoxMenuIcon`](#listboxmenuicon) - [`ListBoxMenuItem`](#listboxmenuitem) - [`ListBoxSelection`](#listboxselection) - [`ListItem`](#listitem) - [`Loading`](#loading) - [`LocalStorage`](#localstorage) - [`Modal`](#modal) - [`ModalBody`](#modalbody) - [`ModalFooter`](#modalfooter) - [`ModalHeader`](#modalheader) - [`MultiSelect`](#multiselect) - [`NotificationActionButton`](#notificationactionbutton) - [`NotificationButton`](#notificationbutton) - [`NotificationIcon`](#notificationicon) - [`NumberInput`](#numberinput) - [`NumberInputSkeleton`](#numberinputskeleton) - [`OrderedList`](#orderedlist) - [`OutboundLink`](#outboundlink) - [`OverflowMenu`](#overflowmenu) - [`OverflowMenuItem`](#overflowmenuitem) - [`Pagination`](#pagination) - [`PaginationNav`](#paginationnav) - [`PaginationSkeleton`](#paginationskeleton) - [`PasswordInput`](#passwordinput) - [`Popover`](#popover) - [`ProgressBar`](#progressbar) - [`ProgressIndicator`](#progressindicator) - [`ProgressIndicatorSkeleton`](#progressindicatorskeleton) - [`ProgressStep`](#progressstep) - [`RadioButton`](#radiobutton) - [`RadioButtonGroup`](#radiobuttongroup) - [`RadioButtonSkeleton`](#radiobuttonskeleton) - [`RadioTile`](#radiotile) - [`RecursiveList`](#recursivelist) - [`Row`](#row) - [`Search`](#search) - [`SearchSkeleton`](#searchskeleton) - [`Select`](#select) - [`SelectItem`](#selectitem) - [`SelectItemGroup`](#selectitemgroup) - [`SelectSkeleton`](#selectskeleton) - [`SelectableTile`](#selectabletile) - [`SideNav`](#sidenav) - [`SideNavDivider`](#sidenavdivider) - [`SideNavItems`](#sidenavitems) - [`SideNavLink`](#sidenavlink) - [`SideNavMenu`](#sidenavmenu) - [`SideNavMenuItem`](#sidenavmenuitem) - [`SkeletonPlaceholder`](#skeletonplaceholder) - [`SkeletonText`](#skeletontext) - [`SkipToContent`](#skiptocontent) - [`Slider`](#slider) - [`SliderSkeleton`](#sliderskeleton) - [`StructuredList`](#structuredlist) - [`StructuredListBody`](#structuredlistbody) - [`StructuredListCell`](#structuredlistcell) - [`StructuredListHead`](#structuredlisthead) - [`StructuredListInput`](#structuredlistinput) - [`StructuredListRow`](#structuredlistrow) - [`StructuredListSkeleton`](#structuredlistskeleton) - [`Switch`](#switch) - [`Tab`](#tab) - [`TabContent`](#tabcontent) - [`Table`](#table) - [`TableBody`](#tablebody) - [`TableCell`](#tablecell) - [`TableContainer`](#tablecontainer) - [`TableHead`](#tablehead) - [`TableHeader`](#tableheader) - [`TableRow`](#tablerow) - [`Tabs`](#tabs) - [`TabsSkeleton`](#tabsskeleton) - [`Tag`](#tag) - [`TagSkeleton`](#tagskeleton) - [`TextArea`](#textarea) - [`TextAreaSkeleton`](#textareaskeleton) - [`TextInput`](#textinput) - [`TextInputSkeleton`](#textinputskeleton) - [`Theme`](#theme) - [`Tile`](#tile) - [`TileGroup`](#tilegroup) - [`TimePicker`](#timepicker) - [`TimePickerSelect`](#timepickerselect) - [`ToastNotification`](#toastnotification) - [`Toggle`](#toggle) - [`ToggleSkeleton`](#toggleskeleton) - [`Toolbar`](#toolbar) - [`ToolbarBatchActions`](#toolbarbatchactions) - [`ToolbarContent`](#toolbarcontent) - [`ToolbarMenu`](#toolbarmenu) - [`ToolbarMenuItem`](#toolbarmenuitem) - [`ToolbarSearch`](#toolbarsearch) - [`Tooltip`](#tooltip) - [`TooltipDefinition`](#tooltipdefinition) - [`TooltipFooter`](#tooltipfooter) - [`TooltipIcon`](#tooltipicon) - [`TreeView`](#treeview) - [`Truncate`](#truncate) - [`UnorderedList`](#unorderedlist) --- ## `Accordion` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ | | align | No | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | | size | No | let | No | "sm" | "xl" | undefined | Specify the size of the accordion | | disabled | No | let | No | boolean | false | Set to `true` to disable the accordion | | skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `AccordionItem` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | | disabled | No | let | Yes | boolean | false | Set to `true` to disable the accordion item | | open | No | let | Yes | boolean | false | Set to `true` to open the first accordion item | | title | No | let | No | string | "title" | Specify the title of the accordion item heading.
Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`) | | iconDescription | No | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------------------- | | -- | Yes | -- | -- | | title | No | -- | {title} | ### Events | Event name | Type | Detail | | :----------- | :-------- | :----- | | animationend | forwarded | -- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | keydown | forwarded | -- | ## `AccordionSkeleton` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ | | count | No | let | No | number | 4 | Specify the number of accordion items to render | | align | No | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | | size | No | let | No | "sm" | "xl" | undefined | Specify the size of the accordion | | open | No | let | No | boolean | true | Set to `false` to close the first accordion item | ### Slots None. ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `AspectRatio` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | | ratio | No | let | No | "2x1" | "2x3" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events None. ## `Breadcrumb` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------- | | noTrailingSlash | No | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash | | skeleton | No | let | No | boolean | false | Set to `true` to display skeleton state | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `BreadcrumbItem` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :------------ | :------- | :--------------- | :------- | -------------------- | ---------------------- | ---------------------------------------------------------------- | | href | No | let | No | string | undefined | Set the `href` to use an anchor link | | isCurrentPage | No | let | No | boolean | false | Set to `true` if the breadcrumb item represents the current page | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :------------------------------------------------------------------------ | :------- | | -- | Yes | {props?: { ["aria-current"]?: string; class: "bx--link"; }} | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `BreadcrumbSkeleton` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------- | | noTrailingSlash | No | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash | | count | No | let | No | number | 3 | Specify the number of breadcrumb items to render | ### Slots None. ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `Breakpoint` ### Types ```ts 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 | { 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; } | -- | ### 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 element
Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) | | skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | | disabled | No | let | No | boolean | false | Set to `true` to disable the button | | href | No | let | No | string | undefined | Set the `href` to use an anchor link | | tabindex | No | let | No | string | "0" | Specify the tabindex | | type | No | let | No | string | "button" | Specify the `type` attribute for the button element | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- | | -- | Yes | { props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } | -- | | icon | No | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `ButtonSet` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- | | stacked | No | let | No | boolean | false | Set to `true` to stack the buttons vertically | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events None. ## `ButtonSkeleton` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------- | ---------------------- | ------------------------------------ | | href | No | let | No | string | undefined | Set the `href` to use an anchor link | | size | No | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button skeleton | ### Slots None. ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `Checkbox` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------- | | ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | title | No | let | Yes | string | undefined | Specify the title attribute for the label element | | group | No | let | Yes | ReadonlyArray | undefined | Specify the bound group | | checked | No | let | Yes | boolean | false | Specify whether the checkbox is checked | | value | No | let | No | any | "" | Specify the value of the checkbox | | indeterminate | No | let | No | boolean | false | Specify whether the checkbox is indeterminate | | skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | | required | No | let | No | boolean | false | Set to `true` to mark the field as required | | readonly | No | let | No | boolean | false | Set to `true` for the checkbox to be read-only | | disabled | No | let | No | boolean | false | Set to `true` to disable the checkbox | | labelText | No | let | No | string | "" | Specify the label text | | hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | | name | No | let | No | string | "" | Set a name for the input element | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input label | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :----------------------- | | labelText | No | -- | {labelText} | ### Events | Event name | Type | Detail | | :--------- | :--------- | :------------------- | | check | dispatched | boolean | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | change | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | ## `CheckboxSkeleton` ### Props None. ### Slots None. ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `ClickableTile` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ----------------------------------------- | | clicked | No | let | Yes | boolean | false | Set to `true` to click the tile | | light | No | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | No | let | No | boolean | false | Set to `true` to disable the tile | | href | No | let | No | string | undefined | Set the `href` | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | keydown | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `CodeSnippet` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ref | No | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | | showMoreLess | No | let | Yes | boolean | true | Set to `false` to hide the show more/less button

NOTE: this prop only works with the `type="multi"` variant | | expanded | No | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | | type | No | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | | code | No | let | No | string | undefined | Set the code snippet text.
Alternatively, use the default slot (e.g., `<CodeSnippet>{code}</CodeSnippet>`).

NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. | | copy | No | let | No | (code: string) => void | async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } } | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.

Provide a custom function to override this behavior. | | hideCopyButton | No | let | No | boolean | false | Set to `true` to hide the copy button | | disabled | No | let | No | boolean | false | Set to `true` for the disabled variant.
Only applies to the "single", "multi" types | | wrapText | No | let | No | boolean | false | Set to `true` to wrap the text.

NOTE: this prop only works with the `type="multi"` variant | | light | No | let | No | boolean | false | Set to `true` to enable the light variant | | skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | | copyButtonDescription | No | let | No | string | undefined | Specify the ARIA label for the copy button icon | | copyLabel | No | let | No | string | undefined | Specify the ARIA label of the copy button | | feedback | No | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | | feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | | showLessText | No | let | No | string | "Show less" | Specify the show less text.

NOTE: this prop only works with the `type="multi"` variant | | showMoreText | No | let | No | string | "Show more" | Specify the show more text

NOTE: this prop only works with the `type="multi"` variant | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------------------ | | -- | Yes | -- | {code} | ### Events | Event name | Type | Detail | | :----------- | :--------- | :---------------- | | expand | dispatched | null | | collapse | dispatched | null | | copy | dispatched | null | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | animationend | forwarded | -- | ## `CodeSnippetSkeleton` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | ------------------------------------ | --------------------- | ---------------------------- | | type | No | let | No | "single" | "multi" | "single" | Set the type of code snippet | ### Slots None. ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `Column` ### Types ```ts export type ColumnSize = boolean | number; export interface ColumnSizeDescriptor { span?: ColumnSize; offset: number; } export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; ``` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>) | | noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | | noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | | noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | | padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to the column | | aspectRatio | No | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | undefined | Specify the aspect ratio of the column | | sm | No | let | No | ColumnBreakpoint | undefined | Set the small breakpoint | | md | No | let | No | ColumnBreakpoint | undefined | Set the medium breakpoint | | lg | No | let | No | ColumnBreakpoint | undefined | Set the large breakpoint | | xlg | No | let | No | ColumnBreakpoint | undefined | Set the extra large breakpoint | | max | No | let | No | ColumnBreakpoint | undefined | Set the maximum breakpoint | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :------------------------------------------------------------ | :------- | | -- | Yes | {props: { class: string; [key: string]: any; }} | -- | ### Events None. ## `ComboBox` ### Types ```ts 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 menu
Either `x` and `y` must be greater than zero | | target | No | let | No | null | ReadonlyArray | null | Specify an element or list of elements to trigger the context menu.
If no element is specified, the context menu applies to the entire window | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :--------- | :----------------------- | | open | dispatched | HTMLElement | | click | forwarded | -- | | keydown | forwarded | -- | | close | dispatched | null | ## `ContextMenuDivider` ### Props None. ### Slots None. ### Events None. ## `ContextMenuGroup` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :---------- | :------- | :--------------- | :------- | ---------------------------------- | --------------- | ---------------------- | | selectedIds | No | let | Yes | ReadonlyArray | [] | -- | | labelText | No | let | No | string | "" | Specify the label text | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events None. ## `ContextMenuOption` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | | ref | No | let | Yes | null | HTMLLIElement | null | Obtain a reference to the list item HTML element | | selectable | No | let | Yes | boolean | false | Set to `true` to enable the selectable variant
Automatically set to `true` if `selected` is `true` | | selected | No | let | Yes | boolean | false | Set to `true` to use the selected variant | | icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
Icon is rendered to the left of the label text | | indented | No | let | Yes | boolean | false | Set to `true` to indent the label | | kind | No | let | No | "default" | "danger" | "default" | Specify the kind of option | | disabled | No | let | No | boolean | false | Set to `true` to enable the disabled state | | labelText | No | let | No | string | "" | Specify the label text.
Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) | | shortcutText | No | let | No | string | "" | Specify the shortcut text.
Alternatively, use the "shortcutText" slot (e.g., `<span slot="shortcutText">...</span>`) | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Specify the id
It's recommended to provide an id as a value to bind to within a selectable/radio menu group | ### Slots | Slot name | Default | Props | Fallback | | :----------- | :------ | :---- | :---------------------------------------------------- | | -- | Yes | -- | -- | | icon | No | -- | <svelte:component this="{icon}" /> | | labelText | No | -- | {labelText} | | shortcutText | No | -- | {shortcutText} | ### Events | Event name | Type | Detail | | :--------- | :--------- | :---------------- | | keydown | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | click | dispatched | null | ## `ContextMenuRadioGroup` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :--------- | :------- | :--------------- | :------- | ------------------- | --------------- | ------------------------------- | | selectedId | No | let | Yes | string | "" | Set the selected radio group id | | labelText | No | let | No | string | "" | Specify the label text | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events None. ## `CopyButton` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------------- | :------- | :--------------- | :------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | feedback | No | let | No | string | "Copied!" | Set the feedback text shown after clicking the button | | feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | | iconDescription | No | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button | | text | Yes | let | No | string | undefined | Specify the text to copy | | copy | No | let | No | (text: string) => void | async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } } | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | ### Slots None. ### Events | Event name | Type | Detail | | :----------- | :--------- | :---------------- | | click | forwarded | -- | | animationend | forwarded | -- | | copy | dispatched | null | ## `DataTable` ### Types ```ts 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 variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | | expandedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be expanded | | expandable | No | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | | sortDirection | No | let | Yes | "none" | "ascending" | "descending" | "none" | Specify the sort direction | | sortKey | No | let | Yes | DataTableKey | null | Specify the header key to sort by | | headers | No | let | No | ReadonlyArray | [] | Specify the data table headers | | rows | No | let | No | ReadonlyArray | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | | size | No | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the data table | | title | No | let | No | string | "" | Specify the title of the data table | | description | No | let | No | string | "" | Specify the description of the data table | | zebra | No | let | No | boolean | false | Set to `true` to use zebra styles | | sortable | No | let | No | boolean | false | Set to `true` for the sortable variant | | batchExpansion | No | let | No | boolean | false | Set to `true` to enable batch expansion | | nonExpandableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids for rows that should not be expandable | | radio | No | let | No | boolean | false | Set to `true` for the radio selection variant | | batchSelection | No | let | No | boolean | false | Set to `true` to enable batch selection | | nonSelectableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids of rows that should not be selectable | | stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header | | useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width | | pageSize | No | let | No | number | 0 | Specify the number of items to display in a page | | page | No | let | No | number | 0 | Set to `number` to set current page | ### Slots | Slot name | Default | Props | Fallback | | :----------- | :------ | :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- | | -- | Yes | -- | -- | | cell | No | { row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } | {cell.display ? cell.display(cell.value, 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> | [] | 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 ```ts 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 element
Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>) | | condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant | | narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant | | fullWidth | No | let | No | boolean | false | Set to `true` to use the fullWidth variant | | noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | | noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | | noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | | padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :-------------------------------------------------------------- | :------- | | -- | Yes | { props: { class: string; [key: string]: any; } } | -- | ### Events None. ## `Header` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :---------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | | isSideNavOpen | No | let | Yes | boolean | false | Set to `true` to open the side nav | | expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default | | uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header | | href | No | let | No | string | undefined | Specify the `href` attribute | | company | No | let | No | string | undefined | Specify the company name.

Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) | | platformName | No | let | No | string | "" | Specify the platform name.
Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) | | persistentHamburgerMenu | No | let | No | boolean | false | Set to `true` to persist the hamburger menu | | expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 | | iconMenu | No | let | No | 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 ```ts export interface HeaderSearchResult { href: string; text: string; description?: string; } ``` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | ------------------ | -------------------------------------------------- | | selectedResultIndex | No | let | Yes | number | 0 | Specify the selected result index | | ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | active | No | let | Yes | boolean | false | Set to `true` to activate and focus the search bar | | value | No | let | Yes | string | "" | Specify the search input value | | results | No | let | No | ReadonlyArray | [] | Render a list of search results | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}<span
class:bx--header-search-menu-description="{true}"
>– {result.description}</span
>{/if} | ### Events | Event name | Type | Detail | | :--------- | :--------- | :---------------------------------------------------------------------------------------------- | | active | dispatched | null | | inactive | dispatched | null | | clear | dispatched | null | | select | dispatched | { value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult } | | change | forwarded | -- | | input | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | | keydown | forwarded | -- | | paste | forwarded | -- | ## `HeaderUtilities` ### Props None. ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events None. ## `ImageLoader` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :----------------- | :------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | error | No | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image | | loaded | No | let | Yes | boolean | false | Set to `true` when the image is loaded | | loading | No | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false | | src | No | let | No | string | "" | Specify the image source | | alt | No | let | No | string | "" | Specify the image alt text | | ratio | No | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | undefined | Specify the aspect ratio for the image wrapper | | fadeIn | No | let | No | boolean | false | Set to `true` to fade in the image on load
The duration uses the `fast-02` value following Carbon guidelines on motion | | loadImage | No | const | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | Method invoked to load the image provided a `src` value | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | error | No | -- | -- | | loading | No | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :--------- | :---------------- | | load | dispatched | null | | error | dispatched | null | ## `InlineLoading` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------- | | status | No | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status | | description | No | let | No | string | undefined | Set the loading description | | iconDescription | No | let | No | string | undefined | Specify a description for the loading icon.
Defaults to the `status` prop for the "error" and "finished" states | | successDelay | No | let | No | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" | ### Slots None. ### Events | Event name | Type | Detail | | :--------- | :--------- | :---------------- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | success | dispatched | null | ## `InlineNotification` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :--------------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------- | | kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | | lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant | | timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | | role | No | let | No | string | "alert" | Set the `role` attribute | | title | No | let | No | string | "" | Specify the title text | | subtitle | No | let | No | string | "" | Specify the subtitle text | | hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button | | statusIconDescription | No | let | No | string | kind + " icon" | Specify the ARIA label for the status icon | | closeButtonDescription | No | let | No | string | "Close notification" | Specify the ARIA label for the close button | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :---------------------- | | -- | Yes | -- | -- | | actions | No | -- | -- | | subtitle | No | -- | {subtitle} | | title | No | -- | {title} | ### Events | Event name | Type | Detail | | :--------- | :--------- | :-------------------------------- | | close | dispatched | { timeout: boolean } | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `Link` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | -------------------------------------------------------- | | ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the top-level HTML element | | size | No | let | No | "sm" | "lg" | undefined | Specify the size of the link | | href | No | let | No | string | undefined | Specify the href value | | inline | No | let | No | boolean | false | Set to `true` to use the inline variant | | icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
`inline` must be `false` | | disabled | No | let | No | boolean | false | Set to `true` to disable the checkbox | | visited | No | let | No | boolean | false | Set to `true` to allow visited styles | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :---------------------------------------------------- | | -- | Yes | -- | -- | | icon | No | -- | <svelte:component this="{icon}" /> | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `ListBox` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :---------- | :------- | :--------------- | :------- | -------------------------------------- | ---------------------- | ------------------------------------------ | | size | No | let | No | "sm" | "xl" | undefined | Set the size of the list box | | type | No | let | No | "default" | "inline" | "default" | Set the type of the list box | | open | No | let | No | boolean | false | Set to `true` to open the list box | | light | No | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | No | let | No | boolean | false | Set to `true` to disable the list box | | invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | | invalidText | No | let | No | string | "" | Specify the invalid state text | | warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | | warnText | No | let | No | string | "" | Specify the warning state text | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | keydown | forwarded | -- | | click | forwarded | -- | ## `ListBoxField` ### Types ```ts 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 ```ts 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 ```ts 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" events
to be dispatched when pressing "Enter" | | secondaryButtonText | No | let | No | string | "" | Specify the secondary button text | | secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` | | selectorPrimaryFocus | No | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | | preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :-------------------------- | | -- | Yes | -- | -- | | heading | No | -- | {modalHeading} | | label | No | -- | {modalLabel} | ### Events | Event name | Type | Detail | | :---------------------- | :--------- | :------------------------------ | | transitionend | dispatched | { open: boolean; } | | click:button--secondary | dispatched | { text: string; } | | keydown | forwarded | -- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | submit | dispatched | null | | click:button--primary | dispatched | null | | close | dispatched | null | | open | dispatched | null | ## `ModalBody` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :------------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------- | | hasForm | No | let | No | boolean | false | Set to `true` if the modal contains form elements | | hasScrollingContent | No | let | No | boolean | false | Set to `true` if the modal contains scrolling content | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events None. ## `ModalFooter` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- | | primaryButtonText | No | let | No | string | "" | Specify the primary button text | | primaryButtonIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon | | primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button | | primaryClass | No | let | No | string | undefined | Specify a class for the primary button | | secondaryButtonText | No | let | No | string | "" | Specify the secondary button text | | secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` | | secondaryClass | No | let | No | string | undefined | Specify a class for the secondary button | | danger | No | let | No | boolean | false | Set to `true` to use the danger variant | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :---------------------- | :--------- | :----------------------------- | | click:button--secondary | dispatched | { text: string; } | ## `ModalHeader` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------------- | :------- | :--------------- | :------- | ------------------- | -------------------- | ----------------------------------------- | | title | No | let | No | string | "" | Specify the modal title | | label | No | let | No | string | "" | Specify the modal label | | labelClass | No | let | No | string | "" | Specify the label class | | titleClass | No | let | No | string | "" | Specify the title class | | closeClass | No | let | No | string | "" | Specify the close class | | closeIconClass | No | let | No | string | "" | Specify the close icon class | | iconDescription | No | let | No | string | "Close" | Specify the ARIA label for the close icon | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | ## `MultiSelect` ### Types ```ts export type MultiSelectItemId = any; export type MultiSelectItemText = string; export interface MultiSelectItem { id: MultiSelectItemId; text: MultiSelectItemText; disabled?: boolean; } ``` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :----------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem | | selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element | | fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element | | multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element | | inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | open | No | let | Yes | boolean | false | Set to `true` to open the dropdown | | value | No | let | Yes | string | "" | Specify the multiselect value | | selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids | | items | No | let | Yes | ReadonlyArray | [] | Set the multiselect items | | itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item | | itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; 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 ```ts export type NumberInputTranslationId = "increment" | "decrement"; ``` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- | | ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | value | No | let | Yes | null | number | null | Specify the input value.
Use `null` to denote "no value" | | size | No | let | No | "sm" | "xl" | undefined | Set the size of the input | | step | No | let | No | number | 1 | Specify the step increment | | max | No | let | No | number | undefined | Specify the maximum value | | min | No | let | No | number | undefined | Specify the minimum value | | light | No | let | No | boolean | false | Set to `true` to enable the light variant | | readonly | No | let | No | boolean | false | Set to `true` for the input to be read-only | | allowEmpty | No | let | No | boolean | false | Set to `true` to allow for an empty value | | disabled | No | let | No | boolean | false | Set to `true` to disable the input | | hideSteppers | No | let | No | boolean | false | Set to `true` to hide the input stepper buttons | | iconDescription | No | let | No | string | "" | Specify the ARIA label for the increment icons | | invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | | invalidText | No | let | No | string | "" | Specify the invalid state text | | warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | | warnText | No | let | No | string | "" | Specify the warning state text | | helperText | No | let | No | string | "" | Specify the helper text | | label | No | let | No | string | "" | Specify the label text | | hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | | translateWithId | No | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | | translationIds | No | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | name | No | let | No | string | undefined | Specify a name attribute for the input | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------------------- | | label | No | -- | {label} | ### Events | Event name | Type | Detail | | :--------- | :--------- | :------------------------------ | | change | dispatched | null | number | | input | dispatched | null | number | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | keydown | forwarded | -- | | keyup | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | | paste | forwarded | -- | ## `NumberInputSkeleton` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ | | hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text | ### Slots None. ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `OrderedList` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------- | | nested | No | let | No | boolean | false | Set to `true` to use the nested variant | | native | No | let | No | boolean | false | Set to `true` to use native list styles | | expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `OutboundLink` ### Props None. ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `OverflowMenu` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- | | menuRef | No | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | | buttonRef | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | | icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<OverflowMenuVertical />` | | open | No | let | Yes | boolean | false | Set to `true` to open the menu | | size | No | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu | | direction | No | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | | light | No | let | No | boolean | false | Set to `true` to enable the light variant | | flipped | No | let | No | boolean | false | Set to `true` to flip the menu relative to the button | | menuOptionsClass | No | let | No | string | undefined | Specify the menu options class | | iconClass | No | let | No | string | undefined | Specify the icon class | | iconDescription | No | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | -- | Yes | -- | -- | | menu | No | -- | <svelte:component
this="{icon}"
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--overflow-menu\_\_icon {iconClass}"
/> | ### Events | Event name | Type | Detail | | :--------- | :--------- | :-------------------------------------------------------- | | close | dispatched | null | { index: number; text: string; } | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | keydown | forwarded | -- | ## `OverflowMenuItem` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :----------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | | ref | No | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | | primaryFocus | No | let | Yes | boolean | false | Set to `true` if the item should be focused when opening the menu | | text | No | let | No | string | "Provide text" | Specify the item text.
Alternatively, use the default slot | | href | No | let | No | string | "" | Specify the `href` attribute if the item is a link | | disabled | No | let | No | boolean | false | Set to `true` to disable the item | | hasDivider | No | let | No | boolean | false | Set to `true` to include a divider | | danger | No | let | No | boolean | false | Set to `true` to use the danger variant | | requireTitle | No | let | No | boolean | true | Set to `false` to omit the button `title` attribute | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ | | -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content="{true}">
{text}
</div> | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | keydown | forwarded | -- | ## `Pagination` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------ | | pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page | | page | No | let | Yes | number | 1 | Specify the current page index | | totalItems | No | let | No | number | 0 | Specify the total number of items | | 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 ```ts export interface RecursiveListNode { text?: string; href?: string; html?: string; } ``` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | --------------------------------------------------------------------------- | ------------------------ | ---------------------------------- | | children | No | let | No | Array | [] | Specify the children to render | | type | No | let | No | "unordered" | "ordered" | "ordered-native" | "unordered" | Specify the type of list to render | ### Slots None. ### Events None. ## `Row` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>) | | condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant | | narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant | | noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | | noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | | noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | | padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :-------------------------------------------------------------- | :------- | | -- | Yes | { props: { class: string; [key: string]: any; } } | -- | ### Events None. ## `Search` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- | | ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | expanded | No | let | Yes | boolean | false | Set to `true to expand the search input | | value | No | let | Yes | any | "" | Specify the value of the search input | | size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | | searchClass | No | let | No | string | "" | Specify the class name passed to the outer div element | | skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | | light | No | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | No | let | No | boolean | false | Set to `true` to disable the search input | | expandable | No | let | No | boolean | false | Set to `true` to enable the expandable variant | | placeholder | No | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | | autocomplete | No | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | | autofocus | No | let | No | boolean | false | Set to `true` to auto focus the search element | | closeButtonLabelText | No | let | No | string | "Clear search input" | Specify the close button label text | | labelText | No | let | No | string | "" | Specify the label text | | icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<Search />` | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :----------------------- | | labelText | No | -- | {labelText} | ### Events | Event name | Type | Detail | | :--------- | :--------- | :---------------- | | expand | dispatched | null | | collapse | dispatched | null | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | | keydown | forwarded | -- | | keyup | forwarded | -- | | paste | forwarded | -- | | clear | dispatched | null | ## `SearchSkeleton` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ----------------- | ------------------------------------ | | size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | ### Slots None. ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `Select` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- | | ref | No | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | | selected | No | let | Yes | string | number | undefined | Specify the selected item value | | size | No | let | No | "sm" | "xl" | undefined | Set the size of the select input | | inline | No | let | No | boolean | false | Set to `true` to use the inline variant | | light | No | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | No | let | No | boolean | false | Set to `true` to disable the select element | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element | | name | No | let | No | string | undefined | Specify a name attribute for the select element | | invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | | invalidText | No | let | No | string | "" | Specify the invalid state text | | warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | | warnText | No | let | No | string | "" | Specify the warning state text | | helperText | No | let | No | string | "" | Specify the helper text | | noLabel | No | let | No | boolean | false | Set to `true` to not render a label | | labelText | No | let | No | string | "" | Specify the label text | | hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | | required | No | let | No | boolean | false | Set to `true` to mark the field as required | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :----------------------- | | -- | Yes | -- | -- | | labelText | No | -- | {labelText} | ### Events | Event name | Type | Detail | | :--------- | :--------- | :-------------------------------- | | 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 span
the full width of its containing element. | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element | | invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | | labelText | No | let | No | string | "" | Specify the label text.
Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) | | hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | | name | No | let | No | string | "" | Set a name for the slider element | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :----------------------- | | labelText | No | -- | {labelText} | ### Events | Event name | Type | Detail | | :--------- | :--------- | :------------------ | | change | dispatched | number | | input | dispatched | number | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `SliderSkeleton` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ | | hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text | ### Slots None. ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `StructuredList` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ---------------------------------------------- | | selected | No | let | Yes | string | undefined | Specify the selected structured list row value | | condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant | | flush | No | let | No | boolean | false | Set to `true` to flush the list | | selection | No | let | No | boolean | false | Set to `true` to use the selection variant | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :--------- | :------------------ | | change | dispatched | string | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `StructuredListBody` ### Props None. ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `StructuredListCell` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------- | | head | No | let | No | boolean | false | Set to `true` to use as a header | | noWrap | No | let | No | boolean | false | Set to `true` to prevent wrapping | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `StructuredListHead` ### Props None. ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `StructuredListInput` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------- | | ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | checked | No | let | Yes | boolean | false | Set to `true` to check the input | | title | No | let | No | string | "title" | Specify the title of the input | | value | No | let | No | string | "value" | Specify the value of the input | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | name | No | let | No | string | "" | Specify a name attribute for the input | ### Slots None. ### Events None. ## `StructuredListRow` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ | | head | No | let | No | boolean | false | Set to `true` to use as a header | | label | No | let | No | boolean | false | Set to `true` to render a label slot | | tabindex | No | let | No | string | "0" | Specify the tabindex | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | keydown | forwarded | -- | ## `StructuredListSkeleton` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | ------------------- | -------------- | -------------------------- | | rows | No | let | No | number | 5 | Specify the number of rows | ### Slots None. ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `Switch` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- | | ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | | selected | No | let | Yes | boolean | false | Set to `true` for the switch to be selected | | text | No | let | No | string | "Provide text" | Specify the switch text.
Alternatively, use the "text" slot (e.g., `<span slot="text">...</span>`) | | disabled | No | let | No | boolean | false | Set to `true` to disable the switch | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------------------ | | -- | Yes | -- | {text} | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | keydown | forwarded | -- | ## `Tab` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | | ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | | label | No | let | No | string | "" | Specify the tab label.
Alternatively, use the default slot (e.g., `<Tab><span>Label</span></Tab>`) | | href | No | let | No | string | "#" | Specify the href attribute | | disabled | No | let | No | boolean | false | Set to `true` to disable the tab | | tabindex | No | let | No | string | "0" | Specify the tabindex | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------------------- | | -- | Yes | -- | {label} | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `TabContent` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | ------------------- | ------------------------------------------------ | ----------------------------------- | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events None. ## `Table` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ---------------------------------------------- | | size | No | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the table | | zebra | No | let | No | boolean | false | Set to `true` to use zebra styles | | useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width | | sortable | No | let | No | boolean | false | Set to `true` for the sortable variant | | stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header | | tableStyle | No | let | No | string | undefined | Set the style attribute on the `table` element | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events None. ## `TableBody` ### Props None. ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events None. ## `TableCell` ### Props None. ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `TableContainer` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- | | title | No | let | No | string | "" | Specify the title of the data table | | description | No | let | No | string | "" | Specify the description of the data table | | stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header | | useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events None. ## `TableHead` ### Props None. ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `TableHeader` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------------- | :------- | :--------------- | :------- | ---------------------------------------------------------- | ------------------------------------------------ | -------------------------------------- | | sortable | No | let | No | boolean | false | Set to `true` for the sortable variant | | sortDirection | No | let | No | "none" | "ascending" | "descending" | "none" | Specify the sort direction | | active | No | let | No | boolean | false | Set to `true` if the column sorting | | scope | No | let | No | string | "col" | Specify the `scope` attribute | | translateWithId | No | let | No | () => string | () => "" | Override the default id translations | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | click | forwarded | -- | ## `TableRow` ### Props None. ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `Tabs` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | -------------------------------- | -------------------------------------------- | | selected | No | let | Yes | number | 0 | Specify the selected tab index | | type | No | let | No | "default" | "container" | "default" | Specify the type of tabs | | autoWidth | No | let | No | boolean | false | Set to `true` for tabs to have an auto-width | | iconDescription | No | let | No | string | "Show menu options" | Specify the ARIA label for the chevron icon | | triggerHref | No | let | No | string | "#" | Specify the tab trigger href attribute | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :------- | | -- | Yes | -- | -- | | content | No | -- | -- | ### Events | Event name | Type | Detail | | :--------- | :--------- | :------------------ | | change | dispatched | number | | keypress | forwarded | -- | | click | forwarded | -- | ## `TabsSkeleton` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ---------------------- | ------------------------------------ | | count | No | let | No | number | 4 | Specify the number of tabs to render | | type | No | let | No | "default" | "container" | "default" | Specify the type of tabs | ### Slots None. ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `Tag` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :---------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- | | type | No | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline" | undefined | Specify the type of tag | | size | No | let | No | "sm" | "default" | "default" | -- | | filter | No | let | No | boolean | false | Set to `true` to use filterable variant | | disabled | No | let | No | boolean | false | Set to `true` to disable a filterable tag | | interactive | No | let | No | boolean | false | Set to `true` to render a `button` element instead of a `div` | | skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | | title | No | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag | | icon | No | let | No | 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 ```ts 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](\\s)?" | Specify the `pattern` attribute for the input element | | maxlength | No | let | No | number | 5 | Specify the `maxlength` input attribute | | light | No | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | No | let | No | boolean | false | Set to `true` to disable the input | | labelText | No | let | No | string | "" | Specify the label text | | hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | | invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | | invalidText | No | let | No | string | "" | Specify the invalid state text | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | name | No | let | No | string | undefined | Specify a name attribute for the input | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :----------------------- | | -- | Yes | -- | -- | | labelText | No | -- | {labelText} | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | | keydown | forwarded | -- | | keyup | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | | paste | forwarded | -- | ## `TimePickerSelect` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- | | ref | No | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | | value | No | let | Yes | number | string | "" | Specify the select value | | disabled | No | let | No | boolean | false | Set to `true` to disable the select | | iconDescription | No | let | No | string | "Open list of options" | Specify the ARIA label for the chevron icon | | labelText | No | let | No | string | "" | Specify the label text | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element | | name | No | let | No | string | undefined | Specify a name attribute for the select element | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :----------------------- | | -- | Yes | -- | -- | | labelText | No | -- | {labelText} | ### Events | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `ToastNotification` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :--------------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------------------------- | | kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | | lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant | | timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | | role | No | let | No | string | "alert" | Set the `role` attribute | | title | No | let | No | string | "" | Specify the title text | | subtitle | No | let | No | string | "" | Specify the subtitle text | | caption | No | let | No | string | "" | Specify the caption text | | statusIconDescription | No | let | No | string | kind + " icon" | Specify the ARIA label for the status icon | | closeButtonDescription | No | let | No | string | "Close notification" | Specify the ARIA label for the close button | | hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button | | fullWidth | No | let | No | boolean | false | Set to `true` for the notification to span
the full width of its containing element. | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :---------------------- | | -- | Yes | -- | -- | | caption | No | -- | {caption} | | subtitle | No | -- | {subtitle} | | title | No | -- | {title} | ### Events | Event name | Type | Detail | | :--------- | :--------- | :-------------------------------- | | close | dispatched | { timeout: boolean } | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | ## `Toggle` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ----------------------------------------------- | | 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 | [] | The filtered row ids | | expanded | No | let | Yes | boolean | false | Set to `true` to expand the search bar | | value | No | let | Yes | number | string | "" | Specify the value of the search input | | persistent | No | let | No | boolean | false | Set to `true` to keep the search bar expanded | | disabled | No | let | No | boolean | false | Set to `true` to disable the search bar | | shouldFilterRows | No | let | No | boolean | ((row: import("./DataTable.svelte").DataTableRow, value: number | string) => boolean) | false | Set to `true` to filter table rows using the search value.

If `true`, the default search excludes `id`, `cells` fields and
only does a basic comparison on string and number type cell values.

To implement your own client-side filtering, pass a function
that accepts a row and value and returns a boolean. | | tabindex | No | let | No | string | "0" | Specify the tabindex | ### Slots None. ### Events | Event name | Type | Detail | | :--------- | :--------- | :---------------- | | clear | dispatched | null | | change | forwarded | -- | | input | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | | keyup | forwarded | -- | | keydown | forwarded | -- | | paste | forwarded | -- | ## `Tooltip` ### Props | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ | | refIcon | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | | refTooltip | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | | ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | | open | No | let | Yes | boolean | false | Set to `true` to open the tooltip | | align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | | direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | | hideIcon | No | let | No | boolean | false | Set to `true` to hide the tooltip icon | | icon | No | let | No | 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 ```ts export type TreeNodeId = string | number; export interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; children?: 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 | | children | No | let | No | Array | [] | Provide an array of children nodes to render | | size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size | | labelText | No | let | No | string | "" | Specify the label text | | hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | | expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes | | collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes | | expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); } | Programmatically expand a subset of nodes.
Expands all nodes if no argument is provided | | collapseNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.
Collapses all nodes if no argument is provided | | showNode | No | function | No | (id: TreeNodeId) => void | () => { for (const child of children) { 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 | -- |