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