# Component Index > 152 components exported from carbon-components-svelte 0.19.0 - Accordion - [Accordion](#accordion) - [AccordionItem](#accordionitem) - [AccordionSkeleton](#accordionskeleton) - [AspectRatio](#aspectratio) - Breadcrumb - [Breadcrumb](#breadcrumb) - [BreadcrumbItem](#breadcrumbitem) - [BreadcrumbSkeleton](#breadcrumbskeleton) - Button - [Button](#button) - [ButtonSet](#buttonset) - [ButtonSkeleton](#buttonskeleton) - Checkbox - [Checkbox](#checkbox) - [CheckboxSkeleton](#checkboxskeleton) - CodeSnippet - [CodeSnippet](#codesnippet) - [CodeSnippetSkeleton](#codesnippetskeleton) - [ComboBox](#combobox) - ComposedModal - [ComposedModal](#composedmodal) - [ModalBody](#modalbody) - [ModalFooter](#modalfooter) - [ModalHeader](#modalheader) - ContentSwitcher - [ContentSwitcher](#contentswitcher) - [Switch](#switch) - [Copy](#copy) - [CopyButton](#copybutton) - DataTable - [DataTable](#datatable) - [Table](#table) - [TableBody](#tablebody) - [TableCell](#tablecell) - [TableContainer](#tablecontainer) - [TableHead](#tablehead) - [TableHeader](#tableheader) - [TableRow](#tablerow) - [Toolbar](#toolbar) - [ToolbarBatchActions](#toolbarbatchactions) - [ToolbarContent](#toolbarcontent) - [ToolbarSearch](#toolbarsearch) - [DataTableSkeleton](#datatableskeleton) - DatePicker - [DatePicker](#datepicker) - [DatePickerInput](#datepickerinput) - [DatePickerSkeleton](#datepickerskeleton) - Dropdown - [Dropdown](#dropdown) - [DropdownSkeleton](#dropdownskeleton) - FileUploader - [FileUploader](#fileuploader) - [FileUploaderButton](#fileuploaderbutton) - [FileUploaderDropContainer](#fileuploaderdropcontainer) - [FileUploaderItem](#fileuploaderitem) - [FileUploaderSkeleton](#fileuploaderskeleton) - [Filename](#filename) - [FluidForm](#fluidform) - [Form](#form) - [FormGroup](#formgroup) - [FormItem](#formitem) - [FormLabel](#formlabel) - Grid - [Column](#column) - [Grid](#grid) - [Row](#row) - Icon - [Icon](#icon) - [IconSkeleton](#iconskeleton) - [InlineLoading](#inlineloading) - [Link](#link) - ListBox - [ListBox](#listbox) - [ListBoxField](#listboxfield) - [ListBoxMenu](#listboxmenu) - [ListBoxMenuIcon](#listboxmenuicon) - [ListBoxMenuItem](#listboxmenuitem) - [ListBoxSelection](#listboxselection) - [ListItem](#listitem) - [Loading](#loading) - [Modal](#modal) - [MultiSelect](#multiselect) - Notification - [InlineNotification](#inlinenotification) - [NotificationActionButton](#notificationactionbutton) - [NotificationButton](#notificationbutton) - [NotificationIcon](#notificationicon) - [NotificationTextDetails](#notificationtextdetails) - [ToastNotification](#toastnotification) - NumberInput - [NumberInput](#numberinput) - [NumberInputSkeleton](#numberinputskeleton) - [OrderedList](#orderedlist) - OverflowMenu - [OverflowMenu](#overflowmenu) - [OverflowMenuItem](#overflowmenuitem) - Pagination - [Pagination](#pagination) - [PaginationSkeleton](#paginationskeleton) - [PaginationNav](#paginationnav) - ProgressIndicator - [ProgressIndicator](#progressindicator) - [ProgressIndicatorSkeleton](#progressindicatorskeleton) - [ProgressStep](#progressstep) - RadioButton - [RadioButton](#radiobutton) - [RadioButtonSkeleton](#radiobuttonskeleton) - [RadioButtonGroup](#radiobuttongroup) - Search - [Search](#search) - [SearchSkeleton](#searchskeleton) - Select - [Select](#select) - [SelectItem](#selectitem) - [SelectItemGroup](#selectitemgroup) - [SelectSkeleton](#selectskeleton) - [SkeletonPlaceholder](#skeletonplaceholder) - [SkeletonText](#skeletontext) - Slider - [Slider](#slider) - [SliderSkeleton](#sliderskeleton) - StructuredList - [StructuredList](#structuredlist) - [StructuredListBody](#structuredlistbody) - [StructuredListCell](#structuredlistcell) - [StructuredListHead](#structuredlisthead) - [StructuredListInput](#structuredlistinput) - [StructuredListRow](#structuredlistrow) - [StructuredListSkeleton](#structuredlistskeleton) - Tabs - [Tab](#tab) - [TabContent](#tabcontent) - [Tabs](#tabs) - [TabsSkeleton](#tabsskeleton) - Tag - [Tag](#tag) - [TagSkeleton](#tagskeleton) - TextArea - [TextArea](#textarea) - [TextAreaSkeleton](#textareaskeleton) - TextInput - [PasswordInput](#passwordinput) - [TextInput](#textinput) - [TextInputSkeleton](#textinputskeleton) - Tile - [ClickableTile](#clickabletile) - [ExpandableTile](#expandabletile) - [RadioTile](#radiotile) - [SelectableTile](#selectabletile) - [Tile](#tile) - [TileGroup](#tilegroup) - TimePicker - [TimePicker](#timepicker) - [TimePickerSelect](#timepickerselect) - Toggle - [Toggle](#toggle) - [ToggleSkeleton](#toggleskeleton) - ToggleSmall - [ToggleSmall](#togglesmall) - [ToggleSmallSkeleton](#togglesmallskeleton) - [Tooltip](#tooltip) - [TooltipDefinition](#tooltipdefinition) - [TooltipIcon](#tooltipicon) - UIShell - [Content](#content) - [Header](#header) - [HeaderAction](#headeraction) - [HeaderActionLink](#headeractionlink) - [HeaderActionSearch](#headeractionsearch) - [HeaderGlobalAction](#headerglobalaction) - [HeaderNav](#headernav) - [HeaderNavItem](#headernavitem) - [HeaderNavMenu](#headernavmenu) - [HeaderPanelDivider](#headerpaneldivider) - [HeaderPanelLink](#headerpanellink) - [HeaderPanelLinks](#headerpanellinks) - [HeaderUtilities](#headerutilities) - [SideNav](#sidenav) - [SideNavItems](#sidenavitems) - [SideNavLink](#sidenavlink) - [SideNavMenu](#sidenavmenu) - [SideNavMenuItem](#sidenavmenuitem) - [SkipToContent](#skiptocontent) - [UnorderedList](#unorderedlist) --- ## Accordion ### Import path ```js import { Accordion } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :-------------------------------- | :------------ | :------------------------------------------------ | | align | "start" | "end" | `"end"` | Specify alignment of accordion item chevron icon. | | size | "sm" | "xl" | -- | Specify the size of the accordion. | | disabled | boolean | `false` | Set to `true` to disable the accordion. | | skeleton | boolean | `false` | Set to `true` to display the skeleton state. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## AccordionItem ### Import path ```js import { AccordionItem } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :------------------- | :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------- | | title | string | `"title"` | Specify the title of the accordion item heading. Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>). | | open | boolean | `false` | Set to `true` to open the first accordion item. | | disabled | boolean | `false` | Set to `true` to disable the accordion item. | | iconDescription | string | `"Expand/Collapse"` | Specify the ARIA label for the accordion item chevron icon. | ### Slots - **default**: `
...
` - **"title"**: `
...
` ### Forwarded events - `on:animationend` - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:keydown` ### Dispatched events No dispatched events. --- ## AccordionSkeleton ### Import path ```js import { AccordionSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :-------------------------------- | :------------ | :------------------------------------------------ | | count | number | `4` | Specify the number of accordion items to render. | | align | "start" | "end" | `"end"` | Specify alignment of accordion item chevron icon. | | size | "sm" | "xl" | -- | Specify the size of the accordion. | | open | boolean | `true` | Set to `false` to close the first accordion item. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## AspectRatio ### Import path ```js import { AspectRatio } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------------------------------------------------------------------------------------- | :------------ | :------------------------ | | ratio | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | `"2x1"` | Specify the aspect ratio. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## Breadcrumb ### Import path ```js import { Breadcrumb } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :------------------- | :------------ | :--------------------------------------------------- | | noTrailingSlash | boolean | `false` | Set to `true` to hide the breadcrumb trailing slash. | | skeleton | boolean | `false` | Set to `true` to display skeleton state. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## BreadcrumbItem ### Import path ```js import { BreadcrumbItem } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------ | :------------------- | :------------ | :---------------------------------------------------------------- | | href | string | -- | Set the `href` to use an anchor link. | | isCurrentPage | boolean | `false` | Set to `true` if the breadcrumb item represents the current page. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## BreadcrumbSkeleton ### Import path ```js import { BreadcrumbSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :------------------- | :------------ | :--------------------------------------------------- | | noTrailingSlash | boolean | `false` | Set to `true` to hide the breadcrumb trailing slash. | | count | number | `3` | Specify the number of breadcrumb items to render. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Button ### Import path ```js import { Button } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :--------------- | :----------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | `"primary"` | Specify the kind of button. | | size | "default" | "field" | "small" | `"default"` | Specify the size of button. | | hasIconOnly | boolean | `false` | Set to `true` for the icon-only variant. | | icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. | | iconDescription | string | -- | Specify the ARIA label for the button icon. | | tooltipAlignment | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true`. | | tooltipPosition | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon. | | as | 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 | boolean | `false` | Set to `true` to display the skeleton state. | | disabled | boolean | `false` | Set to `true` to disable the button. | | href | string | -- | Set the `href` to use an anchor link. | | tabindex | string | `"0"` | Specify the tabindex. | | type | string | `"button"` | Specify the `type` attribute for the button element. | | ref | null | HTMLAnchorElement | HTMLButtonElement | `null` | Obtain a reference to the HTML element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## ButtonSet ### Import path ```js import { ButtonSet } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :--------------------------------------------- | | stacked | boolean | `false` | Set to `true` to stack the buttons vertically. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## ButtonSkeleton ### Import path ```js import { ButtonSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :--------------------------------------------------- | :------------ | :-------------------------------------- | | href | string | -- | Set the `href` to use an anchor link. | | size | "default" | "field" | "small" | `"default"` | Specify the size of button skeleton. | | small | boolean | `false` | Set to `true` to use the small variant. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Checkbox ### Import path ```js import { Checkbox } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------ | :---------------------------------------- | :------------ | :------------------------------------------------- | | checked | boolean | `false` | Specify whether the checkbox is checked. | | indeterminate | boolean | `false` | Specify whether the checkbox is indeterminate. | | skeleton | boolean | `false` | Set to `true` to display the skeleton state. | | readonly | boolean | `false` | Set to `true` for the checkbox to be read-only. | | disabled | boolean | `false` | Set to `true` to disable the checkbox. | | labelText | string | `""` | Specify the label text. | | hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | | name | string | `""` | Set a name for the input element. | | title | string | -- | Specify the title attribute for the label element. | | id | string | -- | Set an id for the input label. | | ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:change` ### Dispatched events - `on:check` --- ## CheckboxSkeleton ### Import path ```js import { CheckboxSkeleton } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## ClickableTile ### Import path ```js import { ClickableTile } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :----------------------------------------- | | clicked | boolean | `false` | Set to `true` to click the tile. | | light | boolean | `false` | Set to `true` to enable the light variant. | | href | string | -- | Set the `href`. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:keydown` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## CodeSnippet ### Import path ```js import { CodeSnippet } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------------- | :--------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------------- | | type | "single" | "inline" | "multi" | `"single"` | Set the type of code snippet. | | code | string | -- | Set the code snippet text. Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>). | | expanded | boolean | `false` | Set to `true` to expand a multi-line code snippet (type="multi"). | | hideCopyButton | boolean | `false` | Set to `true` to hide the copy button. | | wrapText | boolean | `false` | Set to `true` to wrap the text. Note that `type` must be "multi". | | light | boolean | `false` | Set to `true` to enable the light variant. | | skeleton | boolean | `false` | Set to `true` to display the skeleton state. | | copyButtonDescription | string | -- | Specify the ARIA label for the copy button icon. | | copyLabel | string | -- | Specify the ARIA label of the copy button. | | feedback | string | `"Copied!"` | Specify the feedback text displayed when clicking the snippet. | | feedbackTimeout | number | `2000` | Set the timeout duration (ms) to display feedback text. | | showLessText | string | `"Show less"` | Specify the show less text. `type` must be "multi". | | showMoreText | string | `"Show more"` | Specify the show more text. `type` must be "multi". | | showMoreLess | boolean | `false` | Set to `true` to enable the show more/less button. | | id | string | -- | Set an id for the code element. | | ref | null | HTMLPreElement | `null` | Obtain a reference to the pre HTML element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:animationend` ### Dispatched events No dispatched events. --- ## CodeSnippetSkeleton ### Import path ```js import { CodeSnippetSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :--------------------------------------------------- | :------------ | :---------------------------- | | type | "single" | "inline" | "multi" | `"single"` | Set the type of code snippet. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Column ### Import path ```js import { Column } from "carbon-components-svelte"; ``` ### Props ```ts // `Column` type definitions type ColumnSize = boolean | number; interface ColumnSizeDescriptor { span?: ColumnSize; offset: number; } type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; ``` | Prop name | Type | Default value | Description | | :------------ | :------------------------------------------------------------------------------------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | as | 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 | boolean | `false` | Set to `true` to remove the gutter. | | noGutterLeft | boolean | `false` | Set to `true` to remove the left gutter. | | noGutterRight | boolean | `false` | Set to `true` to remove the right gutter. | | aspectRatio | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | Specify the aspect ratio of the column. | | sm | ColumnBreakpoint | -- | Set the small breakpoint. | | md | ColumnBreakpoint | -- | Set the medium breakpoint. | | lg | ColumnBreakpoint | -- | Set the large breakpoint. | | xlg | ColumnBreakpoint | -- | Set the extra large breakpoint. | | max | ColumnBreakpoint | -- | Set the maximum breakpoint. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## ComboBox ### Import path ```js import { ComboBox } from "carbon-components-svelte"; ``` ### Props ```ts // `ComboBox` type definitions interface ComboBoxItem { id: string; text: string; } ``` | Prop name | Type | Default value | Description | | :--------------- | :---------------------------------------------------------- | :------------ | :------------------------------------------------------------------------ | | items | ComboBoxItem[] | `[]` | Set the combobox items. | | itemToString | (item: ComboBoxItem) => string | -- | Override the display of a combobox item. | | selectedIndex | number | -- | Set the selected item by value index. | | value | string | `""` | Specify the selected combobox value. | | size | "sm" | "xl" | -- | Set the size of the combobox. | | disabled | boolean | `false` | Set to `true` to disable the combobox. | | titleText | string | `""` | Specify the title text of the combobox. | | placeholder | string | `""` | Specify the placeholder text. | | helperText | string | `""` | Specify the helper text. | | invalidText | string | `""` | Specify the invalid state text. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | light | boolean | `false` | Set to `true` to enable the light variant. | | open | boolean | `false` | Set to `true` to open the combobox menu dropdown. | | shouldFilterItem | (item: ComboBoxItem, value: string) => boolean | -- | Determine if an item should be filtered given the current combobox value. | | translateWithId | (id: any) => string | -- | Override the default translation ids. | | id | string | -- | Set an id for the list box component. | | name | string | -- | Specify a name attribute for the input. | | ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | ### Slots No slots. ### Forwarded events - `on:keydown` - `on:focus` - `on:blur` - `on:clear` ### Dispatched events - `on:select` --- ## ComposedModal ### Import path ```js import { ComposedModal } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------------------- | :---------------------------------------- | :----------------------------- | :--------------------------------------------------------------------- | | size | "xs" | "sm" | "lg" | -- | Set the size of the composed modal. | | open | boolean | `false` | Set to `true` to open the modal. | | danger | boolean | `false` | Set to `true` to use the danger variant. | | preventCloseOnClickOutside | boolean | `false` | Set to `true` to prevent the modal from closing when clicking outside. | | containerClass | string | `""` | Specify a class for the inner modal. | | selectorPrimaryFocus | string | `"[data-modal-primary-focus]"` | Specify a selector to be focused when opening the modal. | | ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:transitionend` ### Dispatched events - `on:submit` - `on:close` - `on:open` --- ## Content ### Import path ```js import { Content } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------ | :--------------- | :----------------------------------- | | id | string | `"main-content"` | Specify the id for the main element. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## ContentSwitcher ### Import path ```js import { ContentSwitcher } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------ | :---------------------------- | :------------ | :----------------------------------------- | | selectedIndex | number | `0` | Set the selected index of the switch item. | | light | boolean | `false` | Set to `true` to enable the light variant. | | size | "sm" | "xl" | -- | Specify the size of the content switcher. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events - `on:change` --- ## Copy ### Import path ```js import { Copy } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :----------------------------------------- | :------------ | :------------------------------------------------------ | | feedback | string | `"Copied!"` | Set the feedback text shown after clicking the button. | | feedbackTimeout | number | `2000` | Set the timeout duration (ms) to display feedback text. | | ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:animationend` ### Dispatched events No dispatched events. --- ## CopyButton ### Import path ```js import { CopyButton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :------------------ | :-------------------- | :------------------------------------------------ | | iconDescription | string | `"Copy to clipboard"` | Set the title and ARIA label for the copy button. | ### Slots No slots. ### Forwarded events - `on:click` - `on:animationend` ### Dispatched events No dispatched events. --- ## DataTable ### Import path ```js import { DataTable } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------- | :----------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------- | | headers | {key: string; value: string; display?: (item) => string; sort?: (a, b) => number}[] | `[]` | Specify the data table headers. | | rows | Object[] | `[]` | Specify the rows the data table should render. keys defined in `headers` are used for the row ids. | | size | "compact" | "short" | "tall" | -- | Set the size of the data table. | | title | string | `""` | Specify the title of the data table. | | description | string | `""` | Specify the description of the data table. | | zebra | boolean | `false` | Set to `true` to use zebra styles. | | sortable | boolean | `false` | Set to `true` for the sortable variant. | | expandable | boolean | `false` | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`. | | batchExpansion | boolean | `false` | Set to `true` to enable batch expansion. | | expandedRowIds | string[] | `[]` | Specify the row ids to be expanded. | | radio | boolean | `false` | Set to `true` for the radio selection variant. | | selectable | boolean | `false` | Set to `true` for the selectable variant. Automatically set to `true` if `radio` or `batchSelection` are `true`. | | batchSelection | boolean | `false` | Set to `true` to enable batch selection. | | selectedRowIds | string[] | `[]` | Specify the row ids to be selected. | | stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. | ### Slots - **default**: `
...
` - **"cell-header"**: `
...
` - **"cell"**: `
...
` - **"expanded-row"**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events - `on:click:header--expand` - `on:click` - `on:click:header` - `on:click:row` - `on:click:row--expand` - `on:click:cell` --- ## DataTableSkeleton ### Import path ```js import { DataTableSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :---------- | :-------------------------------------------------- | :------------ | :--------------------------------------------------------------------------- | | columns | number | `5` | Specify the number of columns. | | rows | number | `5` | Specify the number of rows. | | size | "compact" | "short" | "tall" | -- | Set the size of the data table. | | zebra | boolean | `false` | Set to `true` to apply zebra styles to the datatable rows. | | showHeader | boolean | `true` | Set to `false` to hide the header. | | headers | string[] | `[]` | Set the column headers. If `headers` has one more items, `count` is ignored. | | showToolbar | boolean | `true` | Set to `false` to hide the toolbar. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## DatePicker ### Import path ```js import { DatePicker } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------- | :--------------------------------------------------- | :------------ | :--------------------------------------------- | | datePickerType | "simple" | "single" | "range" | `"simple"` | Specify the date picker type. | | value | string | `""` | Specify the date picker input value. | | appendTo | HTMLElement | -- | Specify the element to append the calendar to. | | dateFormat | string | `"m/d/Y"` | Specify the date format. | | maxDate | null | string | Date | `null` | Specify the maximum date. | | minDate | null | string | Date | `null` | Specify the minimum date. | | locale | string | `"en"` | Specify the locale. | | short | boolean | `false` | Set to `true` to use the short variant. | | light | boolean | `false` | Set to `true` to enable the light variant. | | id | string | -- | Set an id for the date picker element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events - `on:change` --- ## DatePickerInput ### Import path ```js import { DatePickerInput } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :---------------------------------------- | :------------------------------- | :-------------------------------------------------- | | size | "sm" | "xl" | -- | Set the size of the input. | | type | string | `"text"` | Specify the input type. | | placeholder | string | `""` | Specify the input placeholder text. | | pattern | string | `"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"` | Specify the Regular Expression for the input value. | | disabled | boolean | `false` | Set to `true` to disable the input. | | iconDescription | string | `""` | Specify the ARIA label for the calendar icon. | | id | string | -- | Set an id for the input element. | | labelText | string | `""` | Specify the label text. | | hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | invalidText | string | `""` | Specify the invalid state text. | | name | string | -- | Set a name for the input element. | | ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | ### Slots No slots. ### Forwarded events - `on:input` - `on:keydown` - `on:blur` ### Dispatched events No dispatched events. --- ## DatePickerSkeleton ### Import path ```js import { DatePickerSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :----------------------------------------- | | range | boolean | `false` | Set to `true` to use the range variant. | | id | string | -- | Set an id to be used by the label element. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Dropdown ### Import path ```js import { Dropdown } from "carbon-components-svelte"; ``` ### Props ```ts // `Dropdown` type definitions type DropdownItemId = string; type DropdownItemText = string; interface DropdownItem { id: DropdownItemId; text: DropdownItemText; } ``` | Prop name | Type | Default value | Description | | :-------------- | :------------------------------------------ | :------------ | :--------------------------------------------- | | items | DropdownItem[] | `[]` | Set the dropdown items. | | itemToString | (item: DropdownItem) => string | -- | Override the display of a dropdown item. | | selectedIndex | number | -- | Specify the selected item index. | | type | "default" | "inline" | `"default"` | Specify the type of dropdown. | | size | "sm" | "lg" | "xl" | -- | Specify the size of the dropdown field. | | open | boolean | `false` | Set to `true` to open the dropdown. | | inline | boolean | `false` | Set to `true` to use the inline variant. | | light | boolean | `false` | Set to `true` to enable the light variant. | | disabled | boolean | `false` | Set to `true` to disable the dropdown. | | titleText | string | `""` | Specify the title text. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | invalidText | string | `""` | Specify the invalid state text. | | helperText | string | `""` | Specify the helper text. | | label | string | -- | Specify the list box label. | | translateWithId | (id: any) => string | -- | Override the default translation ids. | | id | string | -- | Set an id for the list box component. | | name | string | -- | Specify a name attribute for the list box. | | ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | ### Slots No slots. ### Forwarded events No forwarded events. ### Dispatched events - `on:select` --- ## DropdownSkeleton ### Import path ```js import { DropdownSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :--------------------------------------- | | inline | boolean | `false` | Set to `true` to use the inline variant. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## ExpandableTile ### Import path ```js import { ExpandableTile } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------------- | :----------------------------------- | :---------------------------- | :----------------------------------------------------- | | expanded | boolean | `false` | Set to `true` to expand the tile. | | light | boolean | `false` | Set to `true` to enable the light variant. | | tileMaxHeight | number | `0` | Specify the max height of the tile (number of pixels). | | tilePadding | number | `0` | Specify the padding of the tile (number of pixels). | | tileCollapsedIconText | string | `"Interact to expand Tile"` | Specify the icon text of the collapsed tile. | | tileExpandedIconText | string | `"Interact to collapse Tile"` | Specify the icon text of the expanded tile. | | tabindex | string | `"0"` | Specify the tabindex. | | id | string | -- | Set an id for the top-level div element. | | ref | null | HTMLElement | `null` | Obtain a reference to the input HTML element. | ### Slots - **"above"**: `
...
` - **"below"**: `
...
` ### Forwarded events - `on:click` - `on:keypress` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## FileUploader ### Import path ```js import { FileUploader } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :---------------------- | :----------------------------------------------------------------------------------------- | :--------------------------- | :--------------------------------------------------------------------- | | status | "uploading" | "edit" | "complete" | `"uploading"` | Specify the file uploader status. | | accept | string[] | `[]` | Specify the accepted file types. | | files | string[] | `[]` | Obtain the uploaded file names. | | multiple | boolean | `false` | Set to `true` to allow multiple files. | | clearFiles (`constant`) | () => any | -- | Override the default behavior of clearing the array of uploaded files. | | labelDescription | string | `""` | Specify the label description. | | labelTitle | string | `""` | Specify the label title. | | kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | `"primary"` | Specify the kind of file uploader button. | | buttonLabel | string | `""` | Specify the button label. | | iconDescription | string | `"Provide icon description"` | Specify the ARIA label used for the status icons. | | name | string | `""` | Specify a name attribute for the file button uploader input. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:change` - `on:keydown` ### Dispatched events - `on:add` - `on:remove` --- ## FileUploaderButton ### Import path ```js import { FileUploaderButton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------------ | :----------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------- | | accept | string[] | `[]` | Specify the accepted file types. | | multiple | boolean | `false` | Set to `true` to allow multiple files. | | disabled | boolean | `false` | Set to `true` to disable the input. | | disableLabelChanges | boolean | `false` | Set to `true` to disable label changes. | | kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | `"primary"` | Specify the kind of file uploader button. | | labelText | string | `"Add file"` | Specify the label text. | | role | string | `"button"` | Specify the label role. | | tabindex | string | `"0"` | Specify `tabindex` attribute. | | id | string | -- | Set an id for the input element. | | name | string | `""` | Specify a name attribute for the input. | | ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | ### Slots No slots. ### Forwarded events - `on:keydown` - `on:change` - `on:click` ### Dispatched events No dispatched events. --- ## FileUploaderDropContainer ### Import path ```js import { FileUploaderDropContainer } from "carbon-components-svelte"; ``` ### Props ```ts // `FileUploaderDropContainer` type definitions type Files = string[]; ``` | Prop name | Type | Default value | Description | | :------------ | :---------------------------------------- | :------------ | :-------------------------------------------------------------------------------------------------------- | | accept | string[] | `[]` | Specify the accepted file types. | | multiple | boolean | `false` | Set to `true` to allow multiple files. | | validateFiles | (files: Files) => Files | -- | Override the default behavior of validating uploaded files. The default behavior does not validate files. | | labelText | string | `"Add file"` | Specify the label text. | | role | string | `"button"` | Specify the `role` attribute of the drop container. | | disabled | boolean | `false` | Set to `true` to disable the input. | | tabindex | string | `"0"` | Specify `tabindex` attribute. | | id | string | -- | Set an id for the input element. | | name | string | `""` | Specify a name attribute for the input. | | ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | ### Slots No slots. ### Forwarded events - `on:dragover` - `on:dragleave` - `on:drop` - `on:keydown` - `on:change` - `on:click` ### Dispatched events - `on:add` --- ## FileUploaderItem ### Import path ```js import { FileUploaderItem } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :------------------------------------------------------- | :------------ | :------------------------------------------------ | | status | "uploading" | "edit" | "complete" | `"uploading"` | Specify the file uploader status. | | iconDescription | string | `""` | Specify the ARIA label used for the status icons. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | errorSubject | string | `""` | Specify the error subject text. | | errorBody | string | `""` | Specify the error body text. | | id | string | -- | Set an id for the top-level element. | | name | string | `""` | Specify the file uploader name. | ### Slots No slots. ### Forwarded events - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events - `on:delete` --- ## FileUploaderSkeleton ### Import path ```js import { FileUploaderSkeleton } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Filename ### Import path ```js import { Filename } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :------------------------------------------------------- | :------------ | :------------------------------------------------ | | status | "uploading" | "edit" | "complete" | `"uploading"` | Specify the file name status. | | iconDescription | string | `""` | Specify the ARIA label used for the status icons. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | ### Slots No slots. ### Forwarded events - `on:click` - `on:keydown` ### Dispatched events No dispatched events. --- ## FluidForm ### Import path ```js import { FluidForm } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## Form ### Import path ```js import { Form } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:submit` ### Dispatched events No dispatched events. --- ## FormGroup ### Import path ```js import { FormGroup } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :---------- | :------------------- | :------------ | :------------------------------------------ | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | message | boolean | `false` | Set to `true` to render a form requirement. | | messageText | string | `""` | Specify the message text. | | legendText | string | `""` | Specify the legend text. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## FormItem ### Import path ```js import { FormItem } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## FormLabel ### Import path ```js import { FormLabel } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------ | :------------ | :----------------------------------------- | | id | string | -- | Set an id to be used by the label element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Grid ### Import path ```js import { Grid } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------ | :------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | as | 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 | boolean | `false` | Set to `true` to use the condensed variant. | | narrow | boolean | `false` | Set to `true` to use the narrow variant. | | fullWidth | boolean | `false` | Set to `true` to use the fullWidth variant. | | noGutter | boolean | `false` | Set to `true` to remove the gutter. | | noGutterLeft | boolean | `false` | Set to `true` to remove the left gutter. | | noGutterRight | boolean | `false` | Set to `true` to remove the right gutter. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## Header ### Import path ```js import { Header } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :---------------- | :----------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------------------- | | expandedByDefault | boolean | `true` | Set to `false` to hide the side nav by default. | | isSideNavOpen | boolean | `false` | Set to `true` to open the side nav. | | uiShellAriaLabel | string | -- | Specify the ARIA label for the header. | | href | string | -- | Specify the `href` attribute. | | company | string | -- | Specify the company name. | | platformName | string | -- | Specify the platform name. Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>). | | ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | ### Slots - **default**: `
...
` - **"skip-to-content"**: `
...
` - **"platform"**: `
...
` ### Forwarded events - `on:click` ### Dispatched events No dispatched events. --- ## HeaderAction ### Import path ```js import { HeaderAction } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------------------------------------------------------------------- | | isOpen | boolean | `false` | Set to `true` to open the panel. | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. | | text | string | -- | Specify the text. Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>). | | ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | ### Slots - **default**: `
...
` - **"text"**: `
...
` ### Forwarded events - `on:click` ### Dispatched events - `on:close` --- ## HeaderActionLink ### Import path ```js import { HeaderActionLink } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :----------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- | | linkIsActive | boolean | `false` | Set to `true` to use the active state. | | href | string | -- | Specify the `href` attribute. | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. | | ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | ### Slots No slots. ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## HeaderActionSearch ### Import path ```js import { HeaderActionSearch } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------- | :------------------- | :------------ | :--------------------------------- | | searchIsActive | boolean | `false` | Set to `true` to focus the search. | ### Slots No slots. ### Forwarded events No forwarded events. ### Dispatched events - `on:focusInputSearch` - `on:focusOutInputSearch` - `on:inputSearch` --- ## HeaderGlobalAction ### Import path ```js import { HeaderGlobalAction } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------------------------------------------------------ | :------------ | :--------------------------------------------- | | isActive | boolean | `false` | Set to `true` to use the active variant. | | icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon to render. | | ref | null | HTMLButtonElement | `null` | Obtain a reference to the HTML button element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` ### Dispatched events No dispatched events. --- ## HeaderNav ### Import path ```js import { HeaderNav } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------ | :------------ | :---------------------------------- | | ariaLabel | string | -- | Specify the ARIA label for the nav. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## HeaderNavItem ### Import path ```js import { HeaderNavItem } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :----------------------------------------- | :------------ | :--------------------------------------------- | | href | string | -- | Specify the `href` attribute. | | text | string | -- | Specify the text. | | ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:keyup` - `on:keydown` - `on:focus` - `on:blur` ### Dispatched events No dispatched events. --- ## HeaderNavMenu ### Import path ```js import { HeaderNavMenu } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :----------------------------------------- | :------------------ | :--------------------------------------------- | | expanded | boolean | `false` | Set to `true` to toggle the expanded state. | | href | string | `"/"` | Specify the `href` attribute. | | text | string | -- | Specify the text. | | ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | | iconDescription | string | `"Expand/Collapse"` | Specify the ARIA label for the chevron icon. | ### Slots - **default**: `
...
` ### Forwarded events - `on:keydown` - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:keyup` - `on:focus` - `on:blur` ### Dispatched events No dispatched events. --- ## HeaderPanelDivider ### Import path ```js import { HeaderPanelDivider } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## HeaderPanelLink ### Import path ```js import { HeaderPanelLink } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :----------------------------------------- | :------------ | :--------------------------------------------- | | href | string | -- | Specify the `href` attribute. | | ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` ### Dispatched events No dispatched events. --- ## HeaderPanelLinks ### Import path ```js import { HeaderPanelLinks } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## HeaderUtilities ### Import path ```js import { HeaderUtilities } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## Icon ### Import path ```js import { Icon } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------------------------------------------------------ | :------------ | :------------------------------------------------------------------------------------------------------ | | render | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. Icon size must be 16px (e.g. `Add16`, `Task16`). | | skeleton | boolean | `false` | Set to `true` to display the skeleton state. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## IconSkeleton ### Import path ```js import { IconSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------ | :------------ | :------------------------ | | size | number | `16` | Set the size of the icon. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## InlineLoading ### Import path ```js import { InlineLoading } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :----------------------------------------------------------------------- | :------------ | :----------------------------------------------------------------- | | status | "active" | "inactive" | "finished" | "error" | `"active"` | Set the loading status. | | description | string | -- | Set the loading description. | | iconDescription | string | -- | Specify the ARIA label for the loading icon. | | successDelay | number | `1500` | Specify the timeout delay (ms) after `status` is set to "success". | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events - `on:success` --- ## InlineNotification ### Import path ```js import { InlineNotification } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :----------------------------------------------------------------------- | | notificationType | "toast" | "inline" | `"inline"` | Set the type of notification. | | kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | `"error"` | Specify the kind of notification. | | lowContrast | boolean | `false` | Set to `true` to use the low contrast variant. | | timeout | number | `0` | Set the timeout duration (ms) to hide the notification after opening it. | | role | string | `"alert"` | Set the `role` attribute. | | title | string | `"Title"` | Specify the title text. | | subtitle | string | `""` | Specify the subtitle text. | | hideCloseButton | boolean | `false` | Set to `true` to hide the close button. | | iconDescription | string | `"Closes notification"` | Specify the ARIA label for the icon. | ### Slots - **default**: `
...
` - **"actions"**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events - `on:close` --- ## Link ### Import path ```js import { Link } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :--------------------------------------------------------------------- | :------------ | :------------------------------------------------ | | href | string | -- | Specify the href value. | | inline | boolean | `false` | Set to `true` to use the inline variant. | | disabled | boolean | `false` | Set to `true` to disable the checkbox. | | visited | boolean | `false` | Set to `true` to allow visited styles. | | ref | null | HTMLAnchorElement | HTMLParagraphElement | `null` | Obtain a reference to the top-level HTML element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## ListBox ### Import path ```js import { ListBox } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :---------- | :------------------------------------- | :------------ | :------------------------------------------ | | size | "sm" | "xl" | -- | Set the size of the list box. | | type | "default" | "inline" | `"default"` | Set the type of the list box. | | open | boolean | `false` | Set to `true` to open the list box. | | light | boolean | `false` | Set to `true` to enable the light variant. | | disabled | boolean | `false` | Set to `true` to disable the list box. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | invalidText | string | `""` | Specify the invalid state text. | ### Slots - **default**: `
...
` ### Forwarded events - `on:keydown` - `on:click` ### Dispatched events No dispatched events. --- ## ListBoxField ### Import path ```js import { ListBoxField } from "carbon-components-svelte"; ``` ### Props ```ts // `ListBoxField` type definitions type ListBoxFieldTranslationId = "close" | "open"; ``` | Prop name | Type | Default value | Description | | :-------------------------- | :----------------------------------------------------- | :--------------------------------- | :------------------------------------------------ | | disabled | boolean | `false` | Set to `true` to disable the list box field. | | role | string | `"combobox"` | Specify the role attribute. | | tabindex | string | `"-1"` | Specify the tabindex. | | translationIds (`constant`) | { close: "close"; open: "open"; } | `{ close: "close", open: "open" }` | Default translation ids. | | translateWithId | (id: ListBoxFieldTranslationId) => string | -- | Override the default translation ids. | | id | string | -- | Set an id for the top-level element. | | ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:keydown` - `on:blur` ### Dispatched events No dispatched events. --- ## ListBoxMenu ### Import path ```js import { ListBoxMenu } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :-------------------------------------- | :------------ | :-------------------------------------------- | | id | string | -- | Set an id for the top-level element. | | ref | null | HTMLDivElement | `null` | Obtain a reference to the input HTML element. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## ListBoxMenuIcon ### Import path ```js import { ListBoxMenuIcon } from "carbon-components-svelte"; ``` ### Props ```ts // `ListBoxMenuIcon` type definitions type ListBoxMenuIconTranslationId = "close" | "open"; ``` | Prop name | Type | Default value | Description | | :-------------------------- | :-------------------------------------------------------- | :--------------------------------- | :-------------------------------------------- | | open | boolean | `false` | Set to `true` to open the list box menu icon. | | translationIds (`constant`) | { close: "close"; open: "open" } | `{ close: "close", open: "open" }` | Default translation ids. | | translateWithId | (id: ListBoxMenuIconTranslationId) => string | -- | Override the default translation ids. | ### Slots No slots. ### Forwarded events - `on:click` ### Dispatched events No dispatched events. --- ## ListBoxMenuItem ### Import path ```js import { ListBoxMenuItem } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :---------- | :------------------- | :------------ | :--------------------------------------------- | | active | boolean | `false` | Set to `true` to enable the active state. | | highlighted | boolean | `false` | Set to `true` to enable the highlighted state. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## ListBoxSelection ### Import path ```js import { ListBoxSelection } from "carbon-components-svelte"; ``` ### Props ```ts // `ListBoxSelection` type definitions type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; ``` | Prop name | Type | Default value | Description | | :-------------------------- | :---------------------------------------------------------------------- | :------------------------------------------------------------ | :------------------------------------------------ | | selectionCount | any | -- | Specify the number of selected items. | | disabled | boolean | `false` | Set to `true` to disable the list box selection. | | translationIds (`constant`) | { clearAll: "clearAll"; clearSelection: "clearSelection" } | `{ clearAll: "clearAll", clearSelection: "clearSelection", }` | Default translation ids. | | translateWithId | (id: ListBoxSelectionTranslationId) => string | -- | Override the default translation ids. | | ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML element. | ### Slots No slots. ### Forwarded events No forwarded events. ### Dispatched events - `on:clear` --- ## ListItem ### Import path ```js import { ListItem } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Loading ### Import path ```js import { Loading } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :---------- | :------------------- | :--------------------------- | :------------------------------------------ | | small | boolean | `false` | Set to `true` to use the small variant. | | active | boolean | `true` | Set to `false` to disable the active state. | | withOverlay | boolean | `true` | Set to `false` to disable the overlay. | | description | string | `"Active loading indicator"` | Specify the label description. | | id | string | -- | Set an id for the label element. | ### Slots No slots. ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## Modal ### Import path ```js import { Modal } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------------------- | :---------------------------------------- | :----------------------------- | :-------------------------------------------------------------------------- | | size | "xs" | "sm" | "lg" | -- | Set the size of the modal. | | open | boolean | `false` | Set to `true` to open the modal. | | danger | boolean | `false` | Set to `true` to use the danger variant. | | alert | boolean | `false` | Set to `true` to enable alert mode. | | passiveModal | boolean | `false` | Set to `true` to use the passive variant. | | modalHeading | string | -- | Specify the modal heading. | | modalLabel | string | -- | Specify the modal label. | | modalAriaLabel | string | -- | Specify the ARIA label for the modal. | | iconDescription | string | `"Close the modal"` | Specify the ARIA label for the close icon. | | hasForm | boolean | `false` | Set to `true` if the modal contains form elements. | | hasScrollingContent | boolean | `false` | Set to `true` if the modal contains scrolling content. | | primaryButtonText | string | `""` | Specify the primary button text. | | primaryButtonDisabled | boolean | `false` | Set to `true` to disable the primary button. | | shouldSubmitOnEnter | boolean | `true` | Set to `true` for the primary button to be triggered when pressing "Enter". | | secondaryButtonText | string | `""` | Specify the secondary button text. | | selectorPrimaryFocus | string | `"[data-modal-primary-focus]"` | Specify a selector to be focused when opening the modal. | | preventCloseOnClickOutside | boolean | `false` | Set to `true` to prevent the modal from closing when clicking outside. | | id | string | -- | Set an id for the top-level element. | | ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML element. | ### Slots - **default**: `
...
` - **"label"**: `
...
` - **"heading"**: `
...
` ### Forwarded events - `on:keydown` - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events - `on:submit` - `on:click:button--secondary` - `on:close` - `on:open` --- ## ModalBody ### Import path ```js import { ModalBody } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------------ | :------------------- | :------------ | :----------------------------------------------------- | | hasForm | boolean | `false` | Set to `true` if the modal contains form elements. | | hasScrollingContent | boolean | `false` | Set to `true` if the modal contains scrolling content. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## ModalFooter ### Import path ```js import { ModalFooter } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------------- | :------------------- | :------------ | :------------------------------------------- | | primaryButtonText | string | `""` | Specify the primary button text. | | primaryButtonDisabled | boolean | `false` | Set to `true` to disable the primary button. | | primaryClass | string | -- | Specify a class for the primary button. | | secondaryButtonText | string | `""` | Specify the secondary button text. | | secondaryClass | string | -- | Specify a class for the secondary button. | | danger | boolean | `false` | Set to `true` to use the danger variant. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## ModalHeader ### Import path ```js import { ModalHeader } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :------------------ | :------------ | :----------------------------------------- | | title | string | `""` | Specify the modal title. | | label | string | `""` | Specify the modal label. | | labelClass | string | `""` | Specify the label class. | | titleClass | string | `""` | Specify the title class. | | closeClass | string | `""` | Specify the close class. | | closeIconClass | string | `""` | Specify the close icon class. | | iconDescription | string | `"Close"` | Specify the ARIA label for the close icon. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` ### Dispatched events No dispatched events. --- ## MultiSelect ### Import path ```js import { MultiSelect } from "carbon-components-svelte"; ``` ### Props ```ts // `MultiSelect` type definitions type MultiSelectItemId = string; type MultiSelectItemText = string; interface MultiSelectItem { id: MultiSelectItemId; text: MultiSelectItemText; } ``` | Prop name | Type | Default value | Description | | :---------------- | :----------------------------------------------------------------------- | :------------------- | :--------------------------------------------------------------------------------- | | items | MultiSelectItem[] | `[]` | Set the multiselect items. | | itemToString | (item: MultiSelectItem) => string | -- | Override the display of a multiselect item. | | selectedIds | MultiSelectItemId[] | `[]` | Set the selected ids. | | value | string | `""` | Specify the multiselect value. | | size | "sm" | "lg" | "xl" | -- | Set the size of the combobox. | | type | "default" | "inline" | `"default"` | Specify the type of multiselect. | | selectionFeedback | "top" | "fixed" | "top-after-reopen" | `"top-after-reopen"` | Specify the selection feedback after selecting items. | | disabled | boolean | `false` | Set to `true` to disable the dropdown. | | filterable | boolean | `false` | Set to `true` to filter items. | | filterItem | (item: MultiSelectItem, value: string) => string | -- | Override the filtering logic. The default filtering is an exact string comparison. | | open | boolean | `false` | Set to `true` to open the dropdown. | | light | boolean | `false` | Set to `true` to enable the light variant. | | locale | string | `"en"` | Specify the locale. | | placeholder | string | `""` | Specify the placeholder text. | | sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | -- | Override the sorting logic. The default sorting compare the item text value. | | translateWithId | (id: any) => string | -- | Override the default translation ids. | | titleText | string | `""` | Specify the title text. | | useTitleInItem | boolean | `false` | Set to `true` to pass the item to `itemToString` in the checkbox. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | invalidText | string | `""` | Specify the invalid state text. | | helperText | string | `""` | Specify the helper text. | | label | string | `""` | Specify the list box label. | | id | string | -- | Set an id for the list box component. | | name | string | -- | Specify a name attribute for the select. | ### Slots No slots. ### Forwarded events - `on:keydown` - `on:focus` - `on:blur` ### Dispatched events No dispatched events. --- ## NotificationActionButton ### Import path ```js import { NotificationActionButton } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## NotificationButton ### Import path ```js import { NotificationButton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :--------------- | :------------------------------------------------------------------ | :------------- | :----------------------------------------------------- | | notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. | | renderIcon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. | | title | string | -- | Specify the title of the icon. | | iconDescription | string | `"Close icon"` | Specify the ARIA label for the icon. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## NotificationIcon ### Import path ```js import { NotificationIcon } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :------------------------------------- | | kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | `"error"` | Specify the kind of notification icon. | | notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. | | iconDescription | string | `"Closes notification"` | Specify the ARIA label for the icon. | ### Slots No slots. ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## NotificationTextDetails ### Import path ```js import { NotificationTextDetails } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :--------------- | :----------------------------------- | :------------ | :---------------------------- | | notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. | | title | string | `"Title"` | Specify the title text. | | subtitle | string | `""` | Specify the subtitle text. | | caption | string | `"Caption"` | Specify the caption text. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## NumberInput ### Import path ```js import { NumberInput } from "carbon-components-svelte"; ``` ### Props ```ts // `NumberInput` type definitions type NumberInputTranslationId = "increment" | "decrement"; ``` | Prop name | Type | Default value | Description | | :-------------------------- | :-------------------------------------------------------------- | :---------------------------------------------------- | :---------------------------------------------- | | size | "sm" | "xl" | -- | Set the size of the input. | | value | string | `""` | Specify the input value. | | step | number | `1` | Specify the step increment. | | max | number | -- | Specify the maximum value. | | min | number | -- | Specify the minimum value. | | light | boolean | `false` | Set to `true` to enable the light variant. | | readonly | boolean | `false` | Set to `true` for the input to be read-only. | | mobile | boolean | `false` | Set to `true` to enable the mobile variant. | | allowEmpty | boolean | `false` | Set to `true` to allow for an empty value. | | disabled | boolean | `false` | Set to `true` to disable the input. | | iconDescription | string | `""` | Specify the ARIA label for the increment icons. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | invalidText | string | `""` | Specify the invalid state text. | | helperText | string | `""` | Specify the helper text. | | label | string | `""` | Specify the label text. | | hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | | translateWithId | (id: NumberInputTranslationId) => string | -- | Override the default translation ids. | | translationIds (`constant`) | { increment: "increment"; decrement: "decrement" } | `{ increment: "increment", decrement: "decrement", }` | Default translation ids. | | id | string | -- | Set an id for the input element. | | name | string | -- | Specify a name attribute for the input. | | ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | ### Slots - **"label"**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:input` ### Dispatched events - `on:change` --- ## NumberInputSkeleton ### Import path ```js import { NumberInputSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :------------------------------------ | | hideLabel | boolean | `false` | Set to `true` to hide the label text. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## OrderedList ### Import path ```js import { OrderedList } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :--------------------------------------- | | nested | boolean | `false` | Set to `true` to use the nested variant. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## OverflowMenu ### Import path ```js import { OverflowMenu } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :--------------- | :------------------------------------------------------------------ | :--------------------------------- | :----------------------------------------------------------------- | | direction | "top" | "bottom" | `"bottom"` | Specify the direction of the overflow menu relative to the button. | | open | boolean | `false` | Set to `true` to open the menu. | | light | boolean | `false` | Set to `true` to enable the light variant. | | flipped | boolean | `false` | Set to `true` to flip the menu relative to the button. | | menuOptionsClass | string | -- | Specify the menu options class. | | icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. | | iconClass | string | -- | Specify the icon class. | | iconDescription | string | `"Open and close list of options"` | Specify the ARIA label for the icon. | | id | string | -- | Set an id for the button element. | ### Slots - **default**: `
...
` - **"menu"**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:keydown` ### Dispatched events - `on:close` --- ## OverflowMenuItem ### Import path ```js import { OverflowMenuItem } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :----------- | :------------------------------------------------------------------ | :--------------- | :------------------------------------------------------------------------------- | | text | string | `"Provide text"` | Specify the item text. Alternatively, use the default slot for a custom element. | | href | string | `""` | Specify the `href` attribute if the item is a link. | | primaryFocus | boolean | `false` | Set to `true` if the item should be focused when opening the menu. | | disabled | boolean | `false` | Set to `true` to disable the item. | | hasDivider | boolean | `false` | Set to `true` to include a divider. | | danger | boolean | `false` | Set to `true` to use the danger variant. | | requireTitle | boolean | `true` | Set to `false` to omit the button `title` attribute. | | id | string | -- | Set an id for the top-level element. | | ref | null | HTMLAnchorElement | HTMLButtonElement | `null` | Obtain a reference to the HTML element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:keydown` ### Dispatched events No dispatched events. --- ## Pagination ### Import path ```js import { Pagination } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------------- | :--------------------------------------------------------------- | :------------------ | :------------------------------------------------ | | page | number | `1` | Specify the current page index. | | totalItems | number | `0` | Specify the total number of items. | | disabled | boolean | `false` | Set to `true` to disable the pagination. | | forwardText | string | `"Next page"` | Specify the forward button text. | | backwardText | string | `"Previous page"` | Specify the backward button text. | | itemsPerPageText | string | `"Items per page:"` | Specify the items per page text. | | itemText | (min: number, max: number) => string | -- | Override the item text. | | itemRangeText | (min: number, max: number, total: number) => string | -- | Override the item range text. | | pageInputDisabled | boolean | `false` | Set to `true` to disable the page input. | | pageSizeInputDisabled | boolean | `false` | Set to `true` to disable the page size input. | | pageSize | number | `10` | Specify the number of items to display in a page. | | pageSizes | number[] | `[10]` | Specify the available page sizes. | | pagesUnknown | boolean | `false` | Set to `true` if the number of pages is unknown. | | pageText | (page: number) => string | -- | Override the page text. | | pageRangeText | (current: number, total: number) => string | -- | Override the page range text. | | id | string | -- | Set an id for the top-level element. | ### Slots No slots. ### Forwarded events No forwarded events. ### Dispatched events - `on:update` --- ## PaginationNav ### Import path ```js import { PaginationNav } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :----------- | :------------------- | :---------------- | :----------------------------------------- | | page | number | `0` | Specify the current page index. | | total | number | `10` | Specify the total number of pages. | | shown | number | `10` | Specify the total number of pages to show. | | loop | boolean | `false` | Set to `true` to loop the navigation. | | forwardText | string | `"Next page"` | Specify the forward button text. | | backwardText | string | `"Previous page"` | Specify the backward button text. | ### Slots No slots. ### Forwarded events No forwarded events. ### Dispatched events - `on:click:button--previous` - `on:click:button--next` - `on:change` --- ## PaginationSkeleton ### Import path ```js import { PaginationSkeleton } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## PasswordInput ### Import path ```js import { PasswordInput } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :---------------- | :-------------------------------------------------------------- | :---------------- | :----------------------------------------------------- | | size | "sm" | "xl" | -- | Set the size of the input. | | value | string | `""` | Specify the input value. | | type | string | `"password"` | Specify the input type. | | placeholder | string | `""` | Specify the placeholder text. | | hidePasswordLabel | string | `"Hide password"` | Specify the hide password label text. | | showPasswordLabel | string | `"Show password"` | Specify the show password label text. | | tooltipAlignment | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon. | | tooltipPosition | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon. | | light | boolean | `false` | Set to `true` to enable the light variant. | | disabled | boolean | `false` | Set to `true` to disable the input. | | helperText | string | `""` | Specify the helper text. | | labelText | string | `""` | Specify the label text. | | hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | invalidText | string | `""` | Specify the text for the invalid state. | | id | string | -- | Set an id for the input element. | | name | string | -- | Specify a name attribute for the input. | | ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:change` - `on:input` - `on:keydown` - `on:focus` - `on:blur` ### Dispatched events No dispatched events. --- ## ProgressIndicator ### Import path ```js import { ProgressIndicator } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------------- | :------------------- | :------------ | :---------------------------------------------------------------------------------------------- | | currentIndex | number | `0` | Specify the current step index. | | vertical | boolean | `false` | Set to `true` to use the vertical variant. | | spaceEqually | boolean | `false` | Set to `true` to specify whether the progress steps should be split equally in size in the div. | | preventChangeOnClick | boolean | `false` | Set to `true` to prevent updating `currentIndex`. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events - `on:change` --- ## ProgressIndicatorSkeleton ### Import path ```js import { ProgressIndicatorSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :----------------------------------------- | | vertical | boolean | `false` | Set to `true` to use the vertical variant. | | count | number | `4` | Specify the number of steps to render. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## ProgressStep ### Import path ```js import { ProgressStep } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------- | :------------------- | :------------ | :------------------------------------------ | | complete | boolean | `false` | Set to `true` for the complete variant. | | current | boolean | `false` | Set to `true` to use the current variant. | | disabled | boolean | `false` | Set to `true` to disable the progress step. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | description | string | `""` | Specify the step description. | | label | string | `""` | Specify the step label. | | secondaryLabel | string | `""` | Specify the step secondary label. | | id | string | -- | Set an id for the top-level element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:keydown` ### Dispatched events No dispatched events. --- ## RadioButton ### Import path ```js import { RadioButton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------ | :---------------------------------------- | :------------ | :----------------------------------------------- | | value | string | `""` | Specify the value of the radio button. | | checked | boolean | `false` | Set to `true` to check the radio button. | | disabled | boolean | `false` | Set to `true` to disable the radio button. | | labelPosition | "right" | "left" | `"right"` | Specify the label position. | | labelText | string | `""` | Specify the label text. | | hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | | id | string | -- | Set an id for the input element. | | name | string | `""` | Specify a name attribute for the checkbox input. | | ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | ### Slots No slots. ### Forwarded events - `on:change` ### Dispatched events No dispatched events. --- ## RadioButtonGroup ### Import path ```js import { RadioButtonGroup } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------ | :------------------------------------------ | :------------- | :-------------------------------------------- | | selected | string | -- | Set the selected radio button value. | | disabled | boolean | `false` | Set to `true` to disable the radio buttons. | | labelPosition | "right" | "left" | `"right"` | Specify the label position. | | orientation | "horizontal" | "vertical" | `"horizontal"` | Specify the orientation of the radio buttons. | | id | string | -- | Set an id for the container div element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events - `on:change` --- ## RadioButtonSkeleton ### Import path ```js import { RadioButtonSkeleton } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## RadioTile ### Import path ```js import { RadioTile } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :------------------- | :----------------- | :-------------------------------------------------------- | | checked | boolean | `false` | Set to `true` to check the tile. | | light | boolean | `false` | Set to `true` to enable the light variant. | | value | string | `""` | Specify the value of the radio input. | | tabindex | string | `"0"` | Specify the tabindex. | | iconDescription | string | `"Tile checkmark"` | Specify the ARIA label for the radio tile checkmark icon. | | id | string | -- | Set an id for the input element. | | name | string | `""` | Specify a name attribute for the input. | ### Slots - **default**: `
...
` ### Forwarded events - `on:change` - `on:keydown` - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Row ### Import path ```js import { Row } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------ | :------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | as | 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 | boolean | `false` | Set to `true` to use the condensed variant. | | narrow | boolean | `false` | Set to `true` to use the narrow variant. | | noGutter | boolean | `false` | Set to `true` to remove the gutter. | | noGutterLeft | boolean | `false` | Set to `true` to remove the left gutter. | | noGutterRight | boolean | `false` | Set to `true` to remove the right gutter. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## Search ### Import path ```js import { Search } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------------- | :---------------------------------------- | :--------------------- | :------------------------------------------------------- | | small | boolean | `false` | . | | size | "sm" | "lg" | "xl" | `"xl"` | Specify the size of the search input. | | skeleton | boolean | `false` | Set to `true` to display the skeleton state. | | light | boolean | `false` | Set to `true` to enable the light variant. | | disabled | boolean | `false` | Set to `true` to disable the search input. | | value | string | `""` | Specify the value of the search input. | | type | string | `"text"` | Specify the `type` attribute of the search input. | | placeholder | string | `"Search..."` | Specify the `placeholder` attribute of the search input. | | autocomplete | "on" | "off" | `"off"` | Specify the `autocomplete` attribute. | | autofocus | boolean | `false` | Set to `true` to auto focus the search element. | | closeButtonLabelText | string | `"Clear search input"` | Specify the close button label text. | | labelText | string | `""` | Specify the label text. | | id | string | -- | Set an id for the input element. | | ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:change` - `on:input` - `on:focus` - `on:blur` ### Dispatched events No dispatched events. --- ## SearchSkeleton ### Import path ```js import { SearchSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :---------------------------------------- | :------------ | :------------------------------------ | | small | boolean | `false` | . | | size | "sm" | "lg" | "xl" | `"xl"` | Specify the size of the search input. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Select ### Import path ```js import { Select } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :---------- | :----------------------------------------- | :------------ | :----------------------------------------------- | | selected | string | -- | Specify the selected item value. | | size | "sm" | "xl" | -- | Set the size of the select input. | | inline | boolean | `false` | Set to `true` to use the inline variant. | | light | boolean | `false` | Set to `true` to enable the light variant. | | disabled | boolean | `false` | Set to `true` to disable the select element. | | id | string | -- | Set an id for the select element. | | name | string | -- | Specify a name attribute for the select element. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | invalidText | string | `""` | Specify the invalid state text. | | helperText | string | `""` | Specify the helper text. | | noLabel | boolean | `false` | Set to `true` to not render a label. | | labelText | string | `""` | Specify the label text. | | hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | | ref | null | HTMLSelectElement | `null` | Obtain a reference to the select HTML element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:blur` ### Dispatched events - `on:change` --- ## SelectItem ### Import path ```js import { SelectItem } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :----------------------------------- | | value | string | `""` | Specify the option value. | | text | string | `""` | Specify the option text. | | hidden | boolean | `false` | Set to `true` to hide the option. | | disabled | boolean | `false` | Set to `true` to disable the option. | ### Slots No slots. ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## SelectItemGroup ### Import path ```js import { SelectItemGroup } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :---------------- | :--------------------------------------------------- | | disabled | boolean | `false` | Set to `true` to disable the optgroup element. | | label | string | `"Provide label"` | Specify the label attribute of the optgroup element. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## SelectSkeleton ### Import path ```js import { SelectSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :------------------------------------ | | hideLabel | boolean | `false` | Set to `true` to hide the label text. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## SelectableTile ### Import path ```js import { SelectableTile } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :---------------------------------------- | :----------------- | :------------------------------------------------------------- | | selected | boolean | `false` | Set to `true` to select the tile. | | light | boolean | `false` | Set to `true` to enable the light variant. | | title | string | `"title"` | Specify the title of the selectable tile. | | value | string | `"value"` | Specify the value of the selectable tile. | | tabindex | string | `"0"` | Specify the tabindex. | | iconDescription | string | `"Tile checkmark"` | Specify the ARIA label for the selectable tile checkmark icon. | | id | string | -- | Set an id for the input element. | | name | string | `""` | Specify a name attribute for the input. | | ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:keydown` ### Dispatched events No dispatched events. --- ## SideNav ### Import path ```js import { SideNav } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :------------------------------------------ | | fixed | boolean | `false` | Set to `true` to use the fixed variant. | | ariaLabel | string | -- | Specify the ARIA label for the nav. | | isOpen | boolean | `false` | Set to `true` to toggle the expanded state. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## SideNavItems ### Import path ```js import { SideNavItems } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## SideNavLink ### Import path ```js import { SideNavLink } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :--------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- | | isSelected | boolean | `false` | Set to `true` to select the current link. | | href | string | -- | Specify the `href` attribute. | | text | string | -- | Specify the text. | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. | | ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | ### Slots No slots. ### Forwarded events - `on:click` ### Dispatched events No dispatched events. --- ## SideNavMenu ### Import path ```js import { SideNavMenu } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- | | expanded | boolean | `false` | Set to `true` to toggle the expanded state. | | text | string | -- | Specify the text. | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. | | ref | null | HTMLButtonElement | `null` | Obtain a reference to the HTML button element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` ### Dispatched events No dispatched events. --- ## SideNavMenuItem ### Import path ```js import { SideNavMenuItem } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :--------- | :----------------------------------------- | :------------ | :--------------------------------------------- | | isSelected | boolean | -- | Set to `true` to select the item. | | href | string | -- | Specify the `href` attribute. | | text | string | -- | Specify the item text. | | ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | ### Slots No slots. ### Forwarded events - `on:click` ### Dispatched events No dispatched events. --- ## SkeletonPlaceholder ### Import path ```js import { SkeletonPlaceholder } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## SkeletonText ### Import path ```js import { SkeletonText } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :----------------------------------------------- | | lines | number | `3` | Specify the number of lines to render. | | heading | boolean | `false` | Set to `true` to use the heading size variant. | | paragraph | boolean | `false` | Set to `true` to use the paragraph size variant. | | width | string | `"100%"` | Specify the width of the text (% or px). | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## SkipToContent ### Import path ```js import { SkipToContent } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------ | :---------------- | :---------------------------- | | href | string | `"#main-content"` | Specify the `href` attribute. | | tabindex | string | `"0"` | Specify the tabindex. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` ### Dispatched events No dispatched events. --- ## Slider ### Import path ```js import { Slider } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------- | :----------------------------------- | :------------ | :------------------------------------------ | | value | number | `0` | Specify the value of the slider. | | max | number | `100` | Set the maximum slider value. | | maxLabel | string | `""` | Specify the label for the max value. | | min | number | `0` | Set the minimum slider value. | | minLabel | string | `""` | Specify the label for the min value. | | step | number | `1` | Set the step value. | | stepMultiplier | number | `4` | Set the step multiplier value. | | required | boolean | `false` | Set to `true` to require a value. | | inputType | string | `"number"` | Specify the input type. | | disabled | boolean | `false` | Set to `true` to disable the slider. | | light | boolean | `false` | Set to `true` to enable the light variant. | | hideTextInput | boolean | `false` | Set to `true` to hide the text input. | | id | string | -- | Set an id for the slider div element. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | labelText | string | `""` | Specify the label text. | | name | string | `""` | Set a name for the slider element. | | ref | null | HTMLElement | `null` | Obtain a reference to the HTML element. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events - `on:change` --- ## SliderSkeleton ### Import path ```js import { SliderSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :------------------------------------ | | hideLabel | boolean | `false` | Set to `true` to hide the label text. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## StructuredList ### Import path ```js import { StructuredList } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :---------------------------------------------- | | selected | string | -- | Specify the selected structured list row value. | | border | boolean | `false` | Set to `true` to use the bordered variant. | | selection | boolean | `false` | Set to `true` to use the selection variant. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events - `on:change` --- ## StructuredListBody ### Import path ```js import { StructuredListBody } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## StructuredListCell ### Import path ```js import { StructuredListCell } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :--------------------------------- | | head | boolean | `false` | Set to `true` to use as a header. | | noWrap | boolean | `false` | Set to `true` to prevent wrapping. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## StructuredListHead ### Import path ```js import { StructuredListHead } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## StructuredListInput ### Import path ```js import { StructuredListInput } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :---------------------------------------- | :------------ | :-------------------------------------------- | | checked | boolean | `false` | Set to `true` to check the input. | | title | string | `"title"` | Specify the title of the input. | | value | string | `"value"` | Specify the value of the input. | | id | string | -- | Set an id for the input element. | | name | string | `""` | Specify a name attribute for the input. | | ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | ### Slots No slots. ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## StructuredListRow ### Import path ```js import { StructuredListRow } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :------------------------------------ | | head | boolean | `false` | Set to `true` to use as a header. | | label | boolean | `false` | Set to `true` to render a label slot. | | tabindex | string | `"0"` | Specify the tabindex. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:keydown` ### Dispatched events No dispatched events. --- ## StructuredListSkeleton ### Import path ```js import { StructuredListSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :----------------------------------------- | | rows | number | `5` | Specify the number of rows. | | border | boolean | `false` | Set to `true` to use the bordered variant. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Switch ### Import path ```js import { Switch } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :----------------------------------------- | :--------------- | :----------------------------------------------------------------------------------------------------------------- | | text | string | `"Provide text"` | Specify the switch text. Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>). | | selected | boolean | `false` | Set to `true` for the switch to be selected. | | disabled | boolean | `false` | Set to `true` to disable the switch. | | id | string | -- | Set an id for the button element. | | ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:keydown` ### Dispatched events No dispatched events. --- ## Tab ### Import path ```js import { Tab } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :----------------------------------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------- | | label | string | `""` | Specify the tab label. Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>). | | href | string | `"#"` | Specify the href attribute. | | disabled | boolean | `false` | Set to `true` to disable the tab. | | tabindex | string | `"0"` | Specify the tabindex. | | id | string | -- | Set an id for the top-level element. | | ref | null | HTMLAnchorElement | `null` | Obtain a reference to the anchor HTML element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## TabContent ### Import path ```js import { TabContent } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------ | :------------ | :----------------------------------- | | id | string | -- | Set an id for the top-level element. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## Table ### Import path ```js import { Table } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :--------------- | :-------------------------------------------------- | :------------ | :--------------------------------------- | | size | "compact" | "short" | "tall" | -- | Set the size of the table. | | zebra | boolean | `false` | Set to `true` to use zebra styles. | | useStaticWidth | boolean | `false` | Set to `true` to use static width. | | shouldShowBorder | boolean | `false` | Set to `true` for the bordered variant. | | sortable | boolean | `false` | Set to `true` for the sortable variant. | | stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## TableBody ### Import path ```js import { TableBody } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## TableCell ### Import path ```js import { TableCell } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## TableContainer ### Import path ```js import { TableContainer } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :----------- | :------------------- | :------------ | :----------------------------------------- | | title | string | `""` | Specify the title of the data table. | | description | string | `""` | Specify the description of the data table. | | stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## TableHead ### Import path ```js import { TableHead } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## TableHeader ### Import path ```js import { TableHeader } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :------------------------ | :------------ | :------------------------------------ | | scope | string | `"col"` | Specify the `scope` attribute. | | translateWithId | () => string | -- | Override the default id translations. | | id | string | -- | Set an id for the top-level element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:click` ### Dispatched events No dispatched events. --- ## TableRow ### Import path ```js import { TableRow } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :--------- | :------------------- | :------------ | :------------------------------- | | isSelected | boolean | `false` | Set to `true` to select the row. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Tabs ### Import path ```js import { Tabs } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :---------------------------------------- | :-------------------- | :------------------------------------------- | | selected | number | `0` | Specify the selected tab index. | | type | "default" | "container" | `"default"` | Specify the type of tabs. | | iconDescription | string | `"Show menu options"` | Specify the ARIA label for the chevron icon. | | triggerHref | string | `"#"` | Specify the tab trigger href attribute. | ### Slots - **default**: `
...
` - **"content"**: `
...
` ### Forwarded events - `on:keypress` - `on:click` ### Dispatched events - `on:change` --- ## TabsSkeleton ### Import path ```js import { TabsSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------ | :------------ | :------------------------------------ | | count | number | `4` | Specify the number of tabs to render. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Tag ### Import path ```js import { Tag } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------- | :------------------------------------------------------ | | type | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | Specify the type of tag. | | filter | boolean | `false` | Set to `true` to use filterable variant. | | disabled | boolean | `false` | Set to `true` to disable a filterable tag. | | skeleton | boolean | `false` | Set to `true` to display the skeleton state. | | title | string | `"Clear filter"` | Set the title for the close button in a filterable tag. | | id | string | -- | Set an id for the filterable tag. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## TagSkeleton ### Import path ```js import { TagSkeleton } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## TextArea ### Import path ```js import { TextArea } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :---------- | :------------------------------------------- | :------------ | :----------------------------------------------- | | value | string | `""` | Specify the textarea value. | | placeholder | string | `""` | Specify the placeholder text. | | cols | number | `50` | Specify the number of cols. | | rows | number | `4` | Specify the number of rows. | | light | boolean | `false` | Set to `true` to enable the light variant. | | disabled | boolean | `false` | Set to `true` to disable the input. | | helperText | string | `""` | Specify the helper text. | | labelText | string | `""` | Specify the label text. | | hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | invalidText | string | `""` | Specify the text for the invalid state. | | id | string | -- | Set an id for the textarea element. | | name | string | -- | Specify a name attribute for the input. | | ref | null | HTMLTextAreaElement | `null` | Obtain a reference to the textarea HTML element. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:change` - `on:input` - `on:focus` - `on:blur` ### Dispatched events No dispatched events. --- ## TextAreaSkeleton ### Import path ```js import { TextAreaSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :--------------------------------------------- | | hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## TextInput ### Import path ```js import { TextInput } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- | | size | "sm" | "xl" | -- | Set the size of the input. | | value | string | `""` | Specify the input value. | | type | string | `""` | Specify the input type. | | placeholder | string | `""` | Specify the placeholder text. | | light | boolean | `false` | Set to `true` to enable the light variant. | | disabled | boolean | `false` | Set to `true` to disable the input. | | helperText | string | `""` | Specify the helper text. | | id | string | -- | Set an id for the input element. | | name | string | -- | Specify a name attribute for the input. | | labelText | string | `""` | Specify the label text. | | hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | invalidText | string | `""` | Specify the invalid state text. | | warn | boolean | `false` | Set to `true` to indicate an warning state. | | warnText | string | `""` | Specify the warning state text. | | ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | | required | boolean | `false` | Set to `true` to mark the field as required. | | inline | boolean | `false` | Set to `true` to use inline version. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:change` - `on:input` - `on:keydown` - `on:focus` - `on:blur` ### Dispatched events No dispatched events. --- ## TextInputSkeleton ### Import path ```js import { TextInputSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :------------------------------------ | | hideLabel | boolean | `false` | Set to `true` to hide the label text. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Tile ### Import path ```js import { Tile } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :----------------------------------------- | | light | boolean | `false` | Set to `true` to enable the light variant. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## TileGroup ### Import path ```js import { TileGroup } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :--------------------------------------- | | selected | string | -- | Specify the selected tile value. | | disabled | boolean | `false` | Set to `true` to disable the tile group. | | legend | string | `""` | Specify the legend text. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events - `on:select` --- ## TimePicker ### Import path ```js import { TimePicker } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- | | value | string | `""` | Specify the input value. | | type | string | `"text"` | Specify the input type. | | placeholder | string | `"hh=mm"` | Specify the input placeholder text. | | pattern | string | `"(1[012] | [1-9]):[0-5][0-9](\\s)?"` | Specify the `pattern` attribute for the input element. | | maxlength | number | `5` | Specify the `maxlength` input attribute. | | light | boolean | `false` | Set to `true` to enable the light variant. | | disabled | boolean | `false` | Set to `true` to disable the input. | | labelText | string | `""` | Specify the label text. | | hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | | invalid | boolean | `false` | Set to `true` to indicate an invalid state. | | invalidText | string | `""` | Specify the invalid state text. | | id | string | -- | Set an id for the input element. | | name | string | -- | Specify a name attribute for the input. | | ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:change` - `on:input` - `on:focus` - `on:blur` ### Dispatched events No dispatched events. --- ## TimePickerSelect ### Import path ```js import { TimePickerSelect } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :----------------------------------------- | :----------------------- | :----------------------------------------------- | | value | string | `""` | Specify the select value. | | disabled | boolean | `false` | Set to `true` to disable the select. | | iconDescription | string | `"Open list of options"` | Specify the ARIA label for the chevron icon. | | labelText | string | `""` | Specify the label text. | | hideLabel | boolean | `true` | . | | id | string | -- | Set an id for the select element. | | name | string | -- | Specify a name attribute for the select element. | | ref | null | HTMLSelectElement | `null` | Obtain a reference to the select HTML element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## ToastNotification ### Import path ```js import { ToastNotification } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :----------------------------------------------------------------------- | | notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. | | kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | `"error"` | Specify the kind of notification. | | lowContrast | boolean | `false` | Set to `true` to use the low contrast variant. | | timeout | number | `0` | Set the timeout duration (ms) to hide the notification after opening it. | | role | string | `"alert"` | Set the `role` attribute. | | title | string | `"Title"` | Specify the title text. | | subtitle | string | `""` | Specify the subtitle text. | | caption | string | `"Caption"` | Specify the caption text. | | iconDescription | string | `"Closes notification"` | Specify the ARIA label for the icon. | | hideCloseButton | boolean | `false` | Set to `true` to hide the close button. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events - `on:close` --- ## Toggle ### Import path ```js import { Toggle } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :----------------------------------------------- | | toggled | boolean | `false` | Set to `true` to toggle the checkbox input. | | disabled | boolean | `false` | Set to `true` to disable checkbox input. | | labelA | string | `"Off"` | Specify the label for the untoggled state. | | labelB | string | `"On"` | Specify the label for the toggled state. | | labelText | string | `""` | Specify the label text. | | id | string | -- | Set an id for the input element. | | name | string | -- | Specify a name attribute for the checkbox input. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:change` - `on:keyup` - `on:focus` - `on:blur` ### Dispatched events No dispatched events. --- ## ToggleSkeleton ### Import path ```js import { ToggleSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------ | :------------ | :------------------------------- | | labelText | string | `""` | Specify the label text. | | id | string | -- | Set an id for the input element. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## ToggleSmall ### Import path ```js import { ToggleSmall } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :----------------------------------------------- | | toggled | boolean | `false` | Set to `true` to toggle the checkbox input. | | disabled | boolean | `false` | Set to `true` to disable checkbox input. | | labelA | string | `"Off"` | Specify the label for the untoggled state. | | labelB | string | `"On"` | Specify the label for the toggled state. | | labelText | string | `""` | Specify the label text. | | id | string | -- | Set an id for the input element. | | name | string | -- | Specify a name attribute for the checkbox input. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:change` - `on:keyup` - `on:focus` - `on:blur` ### Dispatched events No dispatched events. --- ## ToggleSmallSkeleton ### Import path ```js import { ToggleSmallSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------ | :------------ | :------------------------------- | | labelText | string | `""` | Specify the label text. | | id | string | -- | Set an id for the input element. | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Toolbar ### Import path ```js import { Toolbar } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :--------------------------------- | :------------ | :------------------------ | | size | "sm" | "default" | `"default"` | Specify the toolbar size. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## ToolbarBatchActions ### Import path ```js import { ToolbarBatchActions } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :------------------ | :--------------------------------------------- | :------------ | :-------------------------------------- | | formatTotalSelected | (totalSelected: number) => string | -- | Override the total items selected text. | ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## ToolbarContent ### Import path ```js import { ToolbarContent } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - **default**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## ToolbarSearch ### Import path ```js import { ToolbarSearch } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :--------- | :---------------------------------------- | :------------ | :--------------------------------------------- | | value | string | `""` | Specify the value of the search input. | | expanded | boolean | `false` | Set to `true` to expand the search bar. | | persistent | boolean | `false` | Set to `true` to keep the search bar expanded. | | tabindex | string | `"0"` | Specify the tabindex. | | ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | ### Slots No slots. ### Forwarded events - `on:change` - `on:input` - `on:focus` - `on:blur` ### Dispatched events No dispatched events. --- ## Tooltip ### Import path ```js import { Tooltip } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------------- | :------------------------------------------------------------------ | :------------ | :----------------------------------------------------------------------------------------------------------------------------- | | direction | "top" | "right" | "bottom" | "left" | `"bottom"` | Set the direction of the tooltip relative to the button. | | open | boolean | `false` | Set to `true` to open the tooltip. | | hideIcon | boolean | `false` | Set to `true` to hide the tooltip icon. | | icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button. Icon size must be 16px (e.g. `Add16`, `Task16`). | | iconDescription | string | `""` | Specify the ARIA label for the tooltip button. | | iconName | string | `""` | Specify the icon name attribute. | | tabindex | string | `"0"` | Set the button tabindex. | | tooltipId | string | -- | Set an id for the tooltip. | | triggerId | string | -- | Set an id for the tooltip button. | | triggerText | string | `""` | Set the tooltip button text. | | ref | null | HTMLElement | `null` | Obtain a reference to the trigger text HTML element. | | refTooltip | null | HTMLElement | `null` | Obtain a reference to the tooltip HTML element. | | refIcon | null | HTMLElement | `null` | Obtain a reference to the icon HTML element. | ### Slots - **default**: `
...
` - **"triggerText"**: `
...
` - **"icon"**: `
...
` ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## TooltipDefinition ### Import path ```js import { TooltipDefinition } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :---------- | :------------------------------------------------ | :------------ | :----------------------------------------------------- | | tooltipText | string | `""` | Specify the tooltip text. | | align | "start" | "center" | "end" | `"center"` | Set the alignment of the tooltip relative to the icon. | | direction | "top" | "bottom" | `"bottom"` | Set the direction of the tooltip relative to the icon. | | id | string | -- | Set an id for the tooltip div element. | | ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | ### Slots - **default**: `
...
` - **"tooltip"**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:focus` ### Dispatched events No dispatched events. --- ## TooltipIcon ### Import path ```js import { TooltipIcon } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :---------- | :-------------------------------------------------------------- | :------------ | :----------------------------------------------------- | | tooltipText | string | `""` | Specify the tooltip text. | | align | "start" | "center" | "end" | `"center"` | Set the alignment of the tooltip relative to the icon. | | direction | "top" | "right" | "bottom" | "left" | `"bottom"` | Set the direction of the tooltip relative to the icon. | | id | string | -- | Set an id for the span element. | | ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:focus` ### Dispatched events No dispatched events. --- ## UnorderedList ### Import path ```js import { UnorderedList } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | Description | | :-------- | :------------------- | :------------ | :--------------------------------------- | | nested | boolean | `false` | Set to `true` to use the nested variant. | ### Slots - **default**: `
...
` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. ---