# Component Index > 147 components exported from carbon-components-svelte 0.16.0 - Accordion - [AccordionSkeleton](#accordionskeleton) - [Accordion](#accordion) - [AccordionItem](#accordionitem) - Breadcrumb - [BreadcrumbSkeleton](#breadcrumbskeleton) - [Breadcrumb](#breadcrumb) - [BreadcrumbItem](#breadcrumbitem) - Button - [ButtonSkeleton](#buttonskeleton) - [Button](#button) - [ButtonSet](#buttonset) - Checkbox - [CheckboxSkeleton](#checkboxskeleton) - [Checkbox](#checkbox) - CodeSnippet - [CodeSnippetSkeleton](#codesnippetskeleton) - [CodeSnippet](#codesnippet) - [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) - [DataTableSkeleton](#datatableskeleton) - DatePicker - [DatePickerSkeleton](#datepickerskeleton) - [DatePicker](#datepicker) - [DatePickerInput](#datepickerinput) - Dropdown - [DropdownSkeleton](#dropdownskeleton) - [Dropdown](#dropdown) - FileUploader - [FileUploaderSkeleton](#fileuploaderskeleton) - [FileUploader](#fileuploader) - [FileUploaderButton](#fileuploaderbutton) - [FileUploaderDropContainer](#fileuploaderdropcontainer) - [FileUploaderItem](#fileuploaderitem) - [Filename](#filename) - [FluidForm](#fluidform) - [Form](#form) - [FormGroup](#formgroup) - [FormItem](#formitem) - [FormLabel](#formlabel) - Grid - [Column](#column) - [Grid](#grid) - [Row](#row) - Icon - [IconSkeleton](#iconskeleton) - [Icon](#icon) - [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 - [NumberInputSkeleton](#numberinputskeleton) - [NumberInput](#numberinput) - [OrderedList](#orderedlist) - OverflowMenu - [OverflowMenu](#overflowmenu) - [OverflowMenuItem](#overflowmenuitem) - Pagination - [PaginationSkeleton](#paginationskeleton) - [Pagination](#pagination) - [PaginationNav](#paginationnav) - ProgressIndicator - [ProgressIndicatorSkeleton](#progressindicatorskeleton) - [ProgressIndicator](#progressindicator) - [ProgressStep](#progressstep) - RadioButton - [RadioButtonSkeleton](#radiobuttonskeleton) - [RadioButton](#radiobutton) - [RadioButtonGroup](#radiobuttongroup) - Search - [SearchSkeleton](#searchskeleton) - [Search](#search) - Select - [SelectSkeleton](#selectskeleton) - [Select](#select) - [SelectItem](#selectitem) - [SelectItemGroup](#selectitemgroup) - [SkeletonPlaceholder](#skeletonplaceholder) - [SkeletonText](#skeletontext) - Slider - [SliderSkeleton](#sliderskeleton) - [Slider](#slider) - StructuredList - [StructuredListSkeleton](#structuredlistskeleton) - [StructuredList](#structuredlist) - [StructuredListBody](#structuredlistbody) - [StructuredListCell](#structuredlistcell) - [StructuredListHead](#structuredlisthead) - [StructuredListInput](#structuredlistinput) - [StructuredListRow](#structuredlistrow) - Tabs - [Tab](#tab) - [TabContent](#tabcontent) - [Tabs](#tabs) - [TabsSkeleton](#tabsskeleton) - Tag - [TagSkeleton](#tagskeleton) - [Tag](#tag) - TextArea - [TextAreaSkeleton](#textareaskeleton) - [TextArea](#textarea) - TextInput - [PasswordInput](#passwordinput) - [TextInputSkeleton](#textinputskeleton) - [TextInput](#textinput) - Tile - [ClickableTile](#clickabletile) - [ExpandableTile](#expandabletile) - [RadioTile](#radiotile) - [SelectableTile](#selectabletile) - [Tile](#tile) - [TileGroup](#tilegroup) - TimePicker - [TimePicker](#timepicker) - [TimePickerSelect](#timepickerselect) - Toggle - [ToggleSkeleton](#toggleskeleton) - [Toggle](#toggle) - ToggleSmall - [ToggleSmallSkeleton](#togglesmallskeleton) - [ToggleSmall](#togglesmall) - [Tooltip](#tooltip) - [TooltipDefinition](#tooltipdefinition) - [TooltipIcon](#tooltipicon) - UIShell - [Content](#content) - [Header](#header) - [HeaderAction](#headeraction) - [HeaderActionLink](#headeractionlink) - [HeaderActionSearch](#headeractionsearch) - [HeaderNav](#headernav) - [HeaderNavItem](#headernavitem) - [HeaderNavMenu](#headernavmenu) - [HeaderPanelDivider](#headerpaneldivider) - [HeaderPanelLink](#headerpanellink) - [HeaderPanelLinks](#headerpanellinks) - [HeaderUtilities](#headerutilities) - [HeaderGlobalAction](#headerglobalaction) - [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 | | :-------- | :-------------------------------- | :------------ | | align | "start" | "end" | "end" | | size | "sm" | "xl" | -- | | disabled | boolean | false | | skeleton | boolean | false | ### Slots - `...` ### 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 | | :-------------- | :------------------- | :---------------- | | title | string | "title" | | open | boolean | false | | disabled | boolean | false | | iconDescription | string | "Expand/Collapse" | ### Slots - `...` ### 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 | | :-------- | :-------------------------------- | :------------ | | count | number | 4 | | align | "start" | "end" | "end" | | size | "sm" | "xl" | -- | | open | boolean | true | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Breadcrumb ### Import path ```js import { Breadcrumb } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | | :-------------- | :------------------- | :------------ | | noTrailingSlash | boolean | false | | skeleton | boolean | false | ### Slots - `...` ### 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 | | :------------ | :------------------- | :------------ | | href | string | -- | | isCurrentPage | boolean | false | ### Slots - `...` ### 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 | | :-------------- | :------------------- | :------------ | | noTrailingSlash | boolean | false | | count | number | 3 | ### 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 | | :--------------- | :----------------------------------------------------------------------------------------- | :------------ | | kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | | size | "default" | "field" | "small" | "default" | | hasIconOnly | boolean | false | | icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | | iconDescription | string | -- | | tooltipAlignment | "start" | "center" | "end" | -- | | tooltipPosition | "top" | "right" | "bottom" | "left" | -- | | as | boolean | false | | skeleton | boolean | false | | disabled | boolean | false | | href | string | -- | | tabindex | string | "0" | | type | string | "button" | | ref | null | HTMLAnchorElement | HTMLButtonElement | null | ### Slots - `...` ### 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 | | :-------- | :------------------- | :------------ | | stacked | boolean | false | ### Slots - `...` ### 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 | | :-------- | :--------------------------------------------------- | :------------ | | href | string | -- | | size | "default" | "field" | "small" | "default" | | small | boolean | false | ### 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 | | :------------ | :---------------------------------------- | :------------ | | checked | boolean | false | | indeterminate | boolean | false | | skeleton | boolean | false | | readonly | boolean | false | | disabled | boolean | false | | labelText | string | "" | | hideLabel | boolean | false | | name | string | "" | | title | string | -- | | id | string | -- | | ref | null | HTMLInputElement | null | ### 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 | | :-------- | :------------------- | :------------ | | clicked | boolean | false | | light | boolean | false | | href | string | -- | ### Slots - `...` ### 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 | | :-------------------- | :--------------------------------------------------- | :------------ | | type | "single" | "inline" | "multi" | "single" | | code | string | -- | | expanded | boolean | false | | hideCopyButton | boolean | false | | light | boolean | false | | skeleton | boolean | false | | copyButtonDescription | string | -- | | copyLabel | string | -- | | feedback | string | "Copied!" | | feedbackTimeout | number | 2000 | | showLessText | string | "Show less" | | showMoreText | string | "Show more" | | showMoreLess | boolean | false | | id | string | -- | | ref | null | HTMLPreElement | null | ### Slots - `...` ### 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 | | :-------- | :--------------------------------------------------- | :------------ | | type | "single" | "inline" | "multi" | "single" | ### 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 | | :------------ | :------------------------------------------------------------------------------------------------- | :------------ | | as | boolean | false | | noGutter | boolean | false | | noGutterLeft | boolean | false | | noGutterRight | boolean | false | | aspectRatio | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | | sm | ColumnBreakpoint | -- | | md | ColumnBreakpoint | -- | | lg | ColumnBreakpoint | -- | | xlg | ColumnBreakpoint | -- | | max | ColumnBreakpoint | -- | ### Slots - `...` ### 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 | | :--------------- | :---------------------------------------------------------- | :------------ | | items | ComboBoxItem[] | -- | | itemToString | (item: ComboBoxItem) => string | -- | | selectedIndex | number | -- | | value | string | "" | | size | "sm" | "xl" | -- | | disabled | boolean | false | | titleText | string | "" | | placeholder | string | "" | | helperText | string | "" | | invalidText | string | "" | | invalid | boolean | false | | light | boolean | false | | open | boolean | false | | shouldFilterItem | (item: ComboBoxItem, value: string) => boolean | -- | | translateWithId | (id: any) => string | -- | | id | string | -- | | name | string | -- | | ref | null | HTMLInputElement | null | ### 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 | | :------------------------- | :---------------------------------------- | :--------------------------- | | size | "xs" | "sm" | "lg" | -- | | open | boolean | false | | danger | boolean | false | | preventCloseOnClickOutside | boolean | false | | containerClass | string | "" | | selectorPrimaryFocus | string | "[data-modal-primary-focus]" | | ref | null | HTMLElement | null | ### Slots - `...` ### 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 | | :-------- | :------------------ | :------------- | | id | string | "main-content" | ### Slots - `...` ### 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 | | :------------ | :---------------------------- | :------------ | | selectedIndex | number | 0 | | light | boolean | false | | size | "sm" | "xl" | -- | ### Slots - `...` ### 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 | | :-------------- | :----------------------------------------- | :------------ | | feedback | string | "Copied!" | | feedbackTimeout | number | 2000 | | ref | null | HTMLButtonElement | null | ### Slots - `...` ### 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 | | :-------------- | :------------------ | :------------------ | | iconDescription | string | "Copy to clipboard" | ### 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 | | :----------- | :-------------------------------------------------- | :------------ | | headers | {key: string; value: string;}[] | -- | | rows | Object[] | -- | | size | "compact" | "short" | "tall" | -- | | title | string | "" | | description | string | "" | | zebra | boolean | false | | sortable | boolean | false | | stickyHeader | boolean | false | ### Slots - `...` ### Forwarded events No forwarded events. ### Dispatched events - `on:click` - `on:click:header` - `on:click:row` - `on:click:cell` --- ## DataTableSkeleton ### Import path ```js import { DataTableSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | | :---------- | :-------------------------------------------------- | :------------ | | columns | number | 5 | | rows | number | 5 | | size | "compact" | "short" | "tall" | -- | | zebra | boolean | false | | showHeader | boolean | true | | headers | string[] | -- | | showToolbar | boolean | true | ### 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 | | :------------- | :--------------------------------------------------- | :------------ | | datePickerType | "simple" | "single" | "range" | "simple" | | value | string | "" | | appendTo | HTMLElement | -- | | dateFormat | string | "m/d/Y" | | maxDate | null | string | Date | null | | minDate | null | string | Date | null | | locale | string | "en" | | short | boolean | false | | light | boolean | false | | id | string | -- | ### Slots - `...` ### 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 | | :-------------- | :---------------------------------------- | :----------------------------- | | size | "sm" | "xl" | -- | | type | string | "text" | | placeholder | string | "" | | pattern | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | | disabled | boolean | false | | iconDescription | string | "" | | id | string | -- | | labelText | string | "" | | hideLabel | boolean | false | | invalid | boolean | false | | invalidText | string | "" | | name | string | -- | | ref | null | HTMLInputElement | null | ### 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 | | :-------- | :------------------- | :------------ | | range | boolean | false | | id | string | -- | ### 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 | | :-------------- | :------------------------------------------ | :------------ | | items | DropdownItem[] | -- | | itemToString | (item: DropdownItem) => string | -- | | selectedIndex | number | -- | | type | "default" | "inline" | "default" | | size | "sm" | "lg" | "xl" | -- | | open | boolean | false | | inline | boolean | false | | light | boolean | false | | disabled | boolean | false | | titleText | string | "" | | invalid | boolean | false | | invalidText | string | "" | | helperText | string | "" | | label | string | -- | | translateWithId | (id: any) => string | -- | | id | string | -- | | name | string | -- | | ref | null | HTMLButtonElement | null | ### Slots No slots. ### Forwarded events No forwarded events. ### Dispatched events No dispatched events. --- ## DropdownSkeleton ### Import path ```js import { DropdownSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | | :-------- | :------------------- | :------------ | | inline | boolean | false | ### 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 | | :-------------------- | :----------------------------------- | :-------------------------- | | expanded | boolean | false | | light | boolean | false | | tileMaxHeight | number | 0 | | tilePadding | number | 0 | | tileCollapsedIconText | string | "Interact to expand Tile" | | tileExpandedIconText | string | "Interact to collapse Tile" | | tabindex | string | "0" | | id | string | -- | | ref | null | HTMLElement | null | ### Slots - `...` - `...` ### 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 | | :---------------------- | :----------------------------------------------------------------------------------------- | :------------------------- | | status | "uploading" | "edit" | "complete" | "uploading" | | accept | string[] | -- | | files | string[] | -- | | multiple | boolean | false | | clearFiles (`constant`) | () => any | -- | | labelDescription | string | "" | | labelTitle | string | "" | | kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | | buttonLabel | string | "" | | iconDescription | string | "Provide icon description" | | name | string | "" | ### 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 | | :------------------ | :----------------------------------------------------------------------------------------- | :------------ | | accept | string[] | -- | | multiple | boolean | false | | disabled | boolean | false | | disableLabelChanges | boolean | false | | kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | | labelText | string | "Add file" | | role | string | "button" | | tabindex | string | "0" | | id | string | -- | | name | string | "" | | ref | null | HTMLInputElement | null | ### 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 | | :------------ | :---------------------------------------- | :------------ | | accept | string[] | -- | | multiple | boolean | false | | validateFiles | (files: Files) => Files | -- | | labelText | string | "Add file" | | role | string | "button" | | disabled | boolean | false | | tabindex | string | "0" | | id | string | -- | | name | string | "" | | ref | null | HTMLInputElement | null | ### 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 | | :-------------- | :------------------------------------------------------- | :------------ | | status | "uploading" | "edit" | "complete" | "uploading" | | iconDescription | string | "" | | invalid | boolean | false | | errorSubject | string | "" | | errorBody | string | "" | | id | string | -- | | name | string | "" | ### 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 | | :-------------- | :------------------------------------------------------- | :------------ | | status | "uploading" | "edit" | "complete" | "uploading" | | iconDescription | string | "" | | invalid | boolean | false | ### 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 - `...` ### 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 - `...` ### 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 | | :---------- | :------------------- | :------------ | | invalid | boolean | false | | message | boolean | false | | messageText | string | "" | | legendText | string | "" | ### Slots - `...` ### 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 - `...` ### 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 | | :-------- | :------------------ | :------------ | | id | string | -- | ### Slots - `...` ### 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 | | :------------ | :------------------- | :------------ | | as | boolean | false | | condensed | boolean | false | | narrow | boolean | false | | fullWidth | boolean | false | | noGutter | boolean | false | | noGutterLeft | boolean | false | | noGutterRight | boolean | false | ### Slots - `...` ### 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 | | :---------------- | :----------------------------------------- | :------------ | | expandedByDefault | boolean | true | | isSideNavOpen | boolean | false | | uiShellAriaLabel | string | -- | | href | string | -- | | company | string | -- | | platformName | string | -- | | ref | null | HTMLAnchorElement | null | ### Slots - `...` ### 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 | | :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | | isOpen | boolean | false | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | | text | string | -- | | ref | null | HTMLButtonElement | null | ### Slots - `...` ### Forwarded events - `on:click` ### Dispatched events - `on:close` --- ## HeaderActionLink ### Import path ```js import { HeaderActionLink } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | | :----------- | :-------------------------------------------------------------------------------------------------- | :------------ | | linkIsActive | boolean | false | | href | string | -- | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | | ref | null | HTMLAnchorElement | null | ### 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 | | :------------- | :------------------- | :------------ | | searchIsActive | boolean | false | ### 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 | | :-------- | :------------------------------------------------------------------ | :------------ | | isActive | boolean | false | | icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | | ref | null | HTMLButtonElement | null | ### Slots - `...` ### 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 | | :-------- | :------------------ | :------------ | | ariaLabel | string | -- | ### Slots - `...` ### 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 | | :-------- | :----------------------------------------- | :------------ | | href | string | -- | | text | string | -- | | ref | null | HTMLAnchorElement | null | ### 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 | | :-------------- | :----------------------------------------- | :---------------- | | expanded | boolean | false | | href | string | "/" | | text | string | -- | | ref | null | HTMLAnchorElement | null | | iconDescription | string | "Expand/Collapse" | ### Slots - `...` ### 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 - `...` ### 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 | | :-------- | :----------------------------------------- | :------------ | | href | string | -- | | ref | null | HTMLAnchorElement | null | ### Slots - `...` ### Forwarded events - `on:click` ### Dispatched events No dispatched events. --- ## HeaderPanelLinks ### Import path ```js import { HeaderPanelLinks } from "carbon-components-svelte"; ``` ### Props No exported props. ### Slots - `...` ### 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 - `...` ### 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 | | :-------- | :------------------------------------------------------------------ | :------------ | | render | typeof import("carbon-icons-svelte/lib/Add16").default | -- | | skeleton | boolean | false | ### 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 | | :-------- | :------------------ | :------------ | | size | number | 16 | ### 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 | | :-------------- | :----------------------------------------------------------------------- | :------------ | | status | "active" | "inactive" | "finished" | "error" | "active" | | description | string | -- | | iconDescription | string | -- | | successDelay | number | 1500 | ### 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 | | :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | | notificationType | "toast" | "inline" | "inline" | | kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | | lowContrast | boolean | false | | timeout | number | 0 | | role | string | "alert" | | title | string | "Title" | | subtitle | string | "" | | hideCloseButton | boolean | false | | iconDescription | string | "Closes notification" | ### Slots - `...` ### 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 | | :-------- | :--------------------------------------------------------------------- | :------------ | | href | string | -- | | inline | boolean | false | | disabled | boolean | false | | visited | boolean | false | | ref | null | HTMLAnchorElement | HTMLParagraphElement | null | ### Slots - `...` ### 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 | | :---------- | :------------------------------------- | :------------ | | size | "sm" | "xl" | -- | | type | "default" | "inline" | "default" | | open | boolean | false | | light | boolean | false | | disabled | boolean | false | | invalid | boolean | false | | invalidText | string | "" | ### Slots - `...` ### 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 | | :-------------------------- | :----------------------------------------------------- | :------------------------------- | | disabled | boolean | false | | role | string | "combobox" | | tabindex | string | "-1" | | translationIds (`constant`) | { close: "close"; open: "open"; } | { close: "close", open: "open" } | | translateWithId | (id: ListBoxFieldTranslationId) => string | -- | | id | string | -- | | ref | null | HTMLElement | null | ### Slots - `...` ### 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 | | :-------- | :-------------------------------------- | :------------ | | id | string | -- | | ref | null | HTMLDivElement | null | ### Slots - `...` ### 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 | | :-------------------------- | :-------------------------------------------------------- | :------------------------------- | | open | boolean | false | | translationIds (`constant`) | { close: "close"; open: "open" } | { close: "close", open: "open" } | | translateWithId | (id: ListBoxMenuIconTranslationId) => string | -- | ### 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 | | :---------- | :------------------- | :------------ | | active | boolean | false | | highlighted | boolean | false | ### Slots - `...` ### 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 | | :-------------------------- | :---------------------------------------------------------------------- | :---------------------------------------------------------- | | selectionCount | any | -- | | disabled | boolean | false | | translationIds (`constant`) | { clearAll: "clearAll"; clearSelection: "clearSelection" } | { clearAll: "clearAll", clearSelection: "clearSelection", } | | translateWithId | (id: ListBoxSelectionTranslationId) => string | -- | | ref | null | HTMLElement | null | ### 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 - `...` ### 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 | | :---------- | :------------------- | :------------------------- | | small | boolean | false | | active | boolean | true | | withOverlay | boolean | true | | description | string | "Active loading indicator" | | id | string | -- | ### 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 | | :------------------------- | :---------------------------------------- | :--------------------------- | | size | "xs" | "sm" | "lg" | -- | | open | boolean | false | | danger | boolean | false | | alert | boolean | false | | passiveModal | boolean | false | | modalHeading | string | -- | | modalLabel | string | -- | | modalAriaLabel | string | -- | | iconDescription | string | "Close the modal" | | hasForm | boolean | false | | hasScrollingContent | boolean | false | | primaryButtonText | string | "" | | primaryButtonDisabled | boolean | false | | shouldSubmitOnEnter | boolean | true | | secondaryButtonText | string | "" | | selectorPrimaryFocus | string | "[data-modal-primary-focus]" | | preventCloseOnClickOutside | boolean | false | | id | string | -- | | ref | null | HTMLElement | null | ### Slots - `...` ### 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 | | :------------------ | :------------------- | :------------ | | hasForm | boolean | false | | hasScrollingContent | boolean | false | ### Slots - `...` ### 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 | | :-------------------- | :------------------- | :------------ | | primaryButtonText | string | "" | | primaryButtonDisabled | boolean | false | | primaryClass | string | -- | | secondaryButtonText | string | "" | | secondaryClass | string | -- | | danger | boolean | false | ### Slots - `...` ### 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 | | :-------------- | :------------------ | :------------ | | title | string | "" | | label | string | "" | | labelClass | string | "" | | titleClass | string | "" | | closeClass | string | "" | | closeIconClass | string | "" | | iconDescription | string | "Close" | ### Slots - `...` ### 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 | | :---------------- | :----------------------------------------------------------------------- | :----------------- | | items | MultiSelectItem[] | -- | | itemToString | (item: MultiSelectItem) => string | -- | | selectedIds | MultiSelectItemId[] | -- | | value | string | "" | | size | "sm" | "lg" | "xl" | -- | | type | "default" | "inline" | "default" | | selectionFeedback | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | | disabled | boolean | false | | filterable | boolean | false | | filterItem | (item: MultiSelectItem, value: string) => string | -- | | open | boolean | false | | light | boolean | false | | locale | string | "en" | | placeholder | string | "" | | sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | -- | | translateWithId | (id: any) => string | -- | | titleText | string | "" | | useTitleInItem | boolean | false | | invalid | boolean | false | | invalidText | string | "" | | helperText | string | "" | | label | string | "" | | id | string | -- | | name | string | -- | ### 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 - `...` ### 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 | | :--------------- | :------------------------------------------------------------------ | :------------ | | notificationType | "toast" | "inline" | "toast" | | renderIcon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | | title | string | -- | | iconDescription | string | "Close 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 | | :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | | kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | | notificationType | "toast" | "inline" | "toast" | | iconDescription | string | "Closes notification" | ### 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 | | :--------------- | :----------------------------------- | :------------ | | notificationType | "toast" | "inline" | "toast" | | title | string | "Title" | | subtitle | string | "" | | caption | string | "Caption" | ### Slots - `...` ### 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 | | :-------------------------- | :-------------------------------------------------------------- | :-------------------------------------------------- | | size | "sm" | "xl" | -- | | value | string | "" | | step | number | 1 | | max | number | -- | | min | number | -- | | light | boolean | false | | readonly | boolean | false | | mobile | boolean | false | | allowEmpty | boolean | false | | disabled | boolean | false | | iconDescription | string | "" | | invalid | boolean | false | | invalidText | string | "" | | helperText | string | "" | | label | string | "" | | hideLabel | boolean | false | | translateWithId | (id: NumberInputTranslationId) => string | -- | | translationIds (`constant`) | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | | id | string | -- | | name | string | -- | | ref | null | HTMLInputElement | null | ### Slots - `...` ### 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 | | :-------- | :------------------- | :------------ | | hideLabel | boolean | false | ### 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 | | :-------- | :------------------- | :------------ | | nested | boolean | false | ### Slots - `...` ### 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 | | :--------------- | :------------------------------------------------------------------ | :------------------------------- | | direction | "top" | "bottom" | "bottom" | | open | boolean | false | | light | boolean | false | | flipped | boolean | false | | menuOptionsClass | string | -- | | icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | | iconClass | string | -- | | iconDescription | string | "Open and close list of options" | | id | string | -- | ### Slots - `...` ### 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 | | :----------- | :------------------------------------------------------------------ | :------------- | | text | string | "Provide text" | | href | string | "" | | primaryFocus | boolean | false | | disabled | boolean | false | | hasDivider | boolean | false | | danger | boolean | false | | requireTitle | boolean | true | | id | string | -- | | ref | null | HTMLAnchorElement | HTMLButtonElement | null | ### Slots - `...` ### 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 | | :-------------------- | :--------------------------------------------------------------- | :---------------- | | page | number | 1 | | totalItems | number | 0 | | disabled | boolean | false | | forwardText | string | "Next page" | | backwardText | string | "Previous page" | | itemsPerPageText | string | "Items per page:" | | itemText | (min: number, max: number) => string | -- | | itemRangeText | (min: number, max: number, total: number) => string | -- | | pageInputDisabled | boolean | false | | pageSizeInputDisabled | boolean | false | | pageSize | number | 10 | | pageSizes | number[] | -- | | pagesUnknown | boolean | false | | pageText | (page: number) => string | -- | | pageRangeText | (current: number, total: number) => string | -- | | id | string | -- | ### 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 | | :----------- | :------------------- | :-------------- | | page | number | 0 | | total | number | 10 | | shown | number | 10 | | loop | boolean | false | | forwardText | string | "Next page" | | backwardText | string | "Previous page" | ### 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 | | :---------------- | :-------------------------------------------------------------- | :-------------- | | size | "sm" | "xl" | -- | | value | string | "" | | type | string | "password" | | placeholder | string | "" | | hidePasswordLabel | string | "Hide password" | | showPasswordLabel | string | "Show password" | | tooltipAlignment | "start" | "center" | "end" | -- | | tooltipPosition | "top" | "right" | "bottom" | "left" | -- | | light | boolean | false | | disabled | boolean | false | | helperText | string | "" | | labelText | string | "" | | hideLabel | boolean | false | | invalid | boolean | false | | invalidText | string | "" | | id | string | -- | | name | string | -- | | ref | null | HTMLInputElement | null | ### 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 | | :----------- | :------------------- | :------------ | | currentIndex | number | 0 | | vertical | boolean | false | | spaceEqually | boolean | false | ### Slots - `...` ### 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 | | :-------- | :------------------- | :------------ | | vertical | boolean | false | | count | number | 4 | ### 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 | | :------------- | :------------------- | :------------ | | complete | boolean | false | | current | boolean | false | | disabled | boolean | false | | invalid | boolean | false | | description | string | "" | | label | string | "" | | secondaryLabel | string | "" | | id | string | -- | ### Slots - `...` ### 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 | | :------------ | :---------------------------------------- | :------------ | | value | string | "" | | checked | boolean | false | | disabled | boolean | false | | labelPosition | "right" | "left" | "right" | | labelText | string | "" | | hideLabel | boolean | false | | id | string | -- | | name | string | "" | | ref | null | HTMLInputElement | null | ### 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 | | :------------ | :------------------------------------------ | :------------ | | selected | string | -- | | disabled | boolean | false | | labelPosition | "right" | "left" | "right" | | orientation | "horizontal" | "vertical" | "horizontal" | | id | string | -- | ### Slots - `...` ### 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 | | :-------------- | :------------------- | :--------------- | | checked | boolean | false | | light | boolean | false | | value | string | "" | | tabindex | string | "0" | | iconDescription | string | "Tile checkmark" | | id | string | -- | | name | string | "" | ### Slots - `...` ### 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 | | :------------ | :------------------- | :------------ | | as | boolean | false | | condensed | boolean | false | | narrow | boolean | false | | noGutter | boolean | false | | noGutterLeft | boolean | false | | noGutterRight | boolean | false | ### Slots - `...` ### 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 | | :------------------- | :---------------------------------------- | :------------------- | | small | boolean | false | | size | "sm" | "lg" | -- | | skeleton | boolean | false | | light | boolean | false | | disabled | boolean | false | | value | string | "" | | type | string | "text" | | placeholder | string | "Search..." | | autocomplete | "on" | "off" | "off" | | autofocus | boolean | false | | closeButtonLabelText | string | "Clear search input" | | labelText | string | "" | | id | string | -- | | ref | null | HTMLInputElement | null | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` - `on:change` - `on:input` ### Dispatched events No dispatched events. --- ## SearchSkeleton ### Import path ```js import { SearchSkeleton } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | | :-------- | :------------------- | :------------ | | small | boolean | false | ### 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 | | :---------- | :----------------------------------------- | :------------ | | selected | string | -- | | size | "sm" | "xl" | -- | | inline | boolean | false | | light | boolean | false | | disabled | boolean | false | | id | string | -- | | name | string | -- | | invalid | boolean | false | | invalidText | string | "" | | helperText | string | "" | | noLabel | boolean | false | | labelText | string | "" | | hideLabel | boolean | false | | ref | null | HTMLSelectElement | null | ### Slots - `...` ### Forwarded events - `on:blur` ### Dispatched events - `on:change` --- ## SelectItem ### Import path ```js import { SelectItem } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | | :-------- | :------------------- | :------------ | | value | string | "" | | text | string | "" | | hidden | boolean | false | | disabled | boolean | false | ### 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 | | :-------- | :------------------- | :-------------- | | disabled | boolean | false | | label | string | "Provide label" | ### Slots - `...` ### 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 | | :-------- | :------------------- | :------------ | | hideLabel | boolean | false | ### 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 | | :-------------- | :---------------------------------------- | :--------------- | | selected | boolean | false | | light | boolean | false | | title | string | "title" | | value | string | "value" | | tabindex | string | "0" | | iconDescription | string | "Tile checkmark" | | id | string | -- | | name | string | "" | | ref | null | HTMLInputElement | null | ### Slots - `...` ### 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 | | :-------- | :------------------- | :------------ | | fixed | boolean | false | | ariaLabel | string | -- | | isOpen | boolean | false | ### Slots - `...` ### 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 - `...` ### 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 | | :--------- | :-------------------------------------------------------------------------------------------------- | :------------ | | isSelected | boolean | false | | href | string | -- | | text | string | -- | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | | ref | null | HTMLAnchorElement | null | ### 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 | | :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | | expanded | boolean | false | | text | string | -- | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | | ref | null | HTMLButtonElement | null | ### Slots - `...` ### 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 | | :--------- | :----------------------------------------- | :------------ | | isSelected | boolean | -- | | href | string | -- | | text | string | -- | | ref | null | HTMLAnchorElement | null | ### 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 | | :-------- | :------------------- | :------------ | | lines | number | 3 | | heading | boolean | false | | paragraph | boolean | false | | width | string | "100%" | ### 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 | | :-------- | :------------------ | :-------------- | | href | string | "#main-content" | | tabindex | string | "0" | ### Slots - `...` ### 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 | | :------------- | :----------------------------------- | :------------ | | value | number | 0 | | max | number | 100 | | maxLabel | string | "" | | min | number | 0 | | minLabel | string | "" | | step | number | 1 | | stepMultiplier | number | 4 | | required | boolean | false | | inputType | string | "number" | | disabled | boolean | false | | light | boolean | false | | hideTextInput | boolean | false | | id | string | -- | | invalid | boolean | false | | labelText | string | "" | | name | string | "" | | ref | null | HTMLElement | null | ### 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 | | :-------- | :------------------- | :------------ | | hideLabel | boolean | false | ### 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 | | :-------- | :------------------- | :------------ | | selected | string | -- | | border | boolean | false | | selection | boolean | false | ### Slots - `...` ### 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 - `...` ### 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 | | :-------- | :------------------- | :------------ | | head | boolean | false | | noWrap | boolean | false | ### Slots - `...` ### 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 - `...` ### 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 | | :-------- | :---------------------------------------- | :------------ | | checked | boolean | false | | title | string | "title" | | value | string | "value" | | id | string | -- | | name | string | "" | | ref | null | HTMLInputElement | null | ### 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 | | :-------- | :------------------- | :------------ | | head | boolean | false | | label | boolean | false | | tabindex | string | "0" | ### Slots - `...` ### 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 | | :-------- | :------------------- | :------------ | | rows | number | 5 | | border | boolean | false | ### 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 | | :-------- | :----------------------------------------- | :------------- | | text | string | "Provide text" | | selected | boolean | false | | disabled | boolean | false | | id | string | -- | | ref | null | HTMLButtonElement | null | ### Slots - `...` ### 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 | | :-------- | :----------------------------------------- | :------------ | | label | string | "" | | href | string | "#" | | disabled | boolean | false | | tabindex | string | "0" | | id | string | -- | | ref | null | HTMLAnchorElement | null | ### Slots - `...` ### 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 | | :-------- | :------------------ | :------------ | | id | string | -- | ### Slots - `...` ### 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 | | :--------------- | :-------------------------------------------------- | :------------ | | size | "compact" | "short" | "tall" | -- | | zebra | boolean | false | | useStaticWidth | boolean | false | | shouldShowBorder | boolean | false | | sortable | boolean | false | | stickyHeader | boolean | false | ### Slots - `...` ### 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 - `...` ### 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 - `...` ### 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 | | :----------- | :------------------- | :------------ | | title | string | "" | | description | string | "" | | stickyHeader | boolean | false | ### Slots - `...` ### 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 - `...` ### 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 | | :-------------- | :------------------------ | :------------ | | scope | string | "col" | | translateWithId | () => string | -- | | id | string | -- | ### Slots - `...` ### 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 | | :--------- | :------------------- | :------------ | | isSelected | boolean | false | ### Slots - `...` ### 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 | | :-------------- | :---------------------------------------- | :------------------ | | selected | number | 0 | | type | "default" | "container" | "default" | | iconDescription | string | "Show menu options" | | triggerHref | string | "#" | ### Slots - `...` ### 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 | | :-------- | :------------------ | :------------ | | count | number | 4 | ### 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 | | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | | type | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | | filter | boolean | false | | disabled | boolean | false | | skeleton | boolean | false | | title | string | "Clear filter" | | id | string | -- | ### Slots - `...` ### 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 | | :---------- | :------------------------------------------- | :------------ | | value | string | "" | | placeholder | string | "" | | cols | number | 50 | | rows | number | 4 | | light | boolean | false | | disabled | boolean | false | | helperText | string | "" | | labelText | string | "" | | hideLabel | boolean | false | | invalid | boolean | false | | invalidText | string | "" | | id | string | -- | | name | string | -- | | ref | null | HTMLTextAreaElement | null | ### 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 | | :-------- | :------------------- | :------------ | | hideLabel | boolean | false | ### 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 | | :---------- | :---------------------------------------- | :------------ | | size | "sm" | "xl" | -- | | value | string | "" | | type | string | "" | | placeholder | string | "" | | light | boolean | false | | disabled | boolean | false | | helperText | string | "" | | id | string | -- | | name | string | -- | | labelText | string | "" | | hideLabel | boolean | false | | invalid | boolean | false | | invalidText | string | "" | | warn | boolean | false | | warnText | string | "" | | ref | null | HTMLInputElement | null | | required | boolean | false | | inline | boolean | false | ### 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 | | :-------- | :------------------- | :------------ | | hideLabel | boolean | false | ### 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 | | :-------- | :------------------- | :------------ | | light | boolean | false | ### Slots - `...` ### 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 | | :-------- | :------------------- | :------------ | | selected | string | -- | | disabled | boolean | false | | legend | string | "" | ### Slots - `...` ### 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 | | :---------- | :---------------------------------------- | :------------ | | value | string | "" | | type | string | "text" | | placeholder | string | "hh=mm" | | pattern | string | "(1[012] | [1-9]):[0-5][0-9](\\s)?" | | maxlength | number | 5 | | light | boolean | false | | disabled | boolean | false | | labelText | string | "" | | hideLabel | boolean | false | | invalid | boolean | false | | invalidText | string | "" | | id | string | -- | | name | string | -- | | ref | null | HTMLInputElement | null | ### Slots - `...` ### 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 | | :-------------- | :----------------------------------------- | :--------------------- | | value | string | "" | | disabled | boolean | false | | iconDescription | string | "Open list of options" | | labelText | string | "" | | hideLabel | boolean | true | | id | string | -- | | name | string | -- | | ref | null | HTMLSelectElement | null | ### Slots - `...` ### 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 | | :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | | notificationType | "toast" | "inline" | "toast" | | kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | | lowContrast | boolean | false | | timeout | number | 0 | | role | string | "alert" | | title | string | "Title" | | subtitle | string | "" | | caption | string | "Caption" | | iconDescription | string | "Closes notification" | | hideCloseButton | boolean | false | ### Slots - `...` ### 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 | | :-------- | :------------------- | :------------ | | toggled | boolean | false | | disabled | boolean | false | | labelA | string | "Off" | | labelB | string | "On" | | labelText | string | "" | | id | string | -- | | name | string | -- | ### 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 | | :-------- | :------------------ | :------------ | | labelText | string | "" | | id | string | -- | ### 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 | | :-------- | :------------------- | :------------ | | toggled | boolean | false | | disabled | boolean | false | | labelA | string | "Off" | | labelB | string | "On" | | labelText | string | "" | | id | string | -- | | name | string | -- | ### 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 | | :-------- | :------------------ | :------------ | | labelText | string | "" | | id | string | -- | ### Slots No slots. ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. --- ## Tooltip ### Import path ```js import { Tooltip } from "carbon-components-svelte"; ``` ### Props | Prop name | Type | Default value | | :-------------- | :------------------------------------------------------------------ | :------------ | | direction | "top" | "right" | "bottom" | "left" | "bottom" | | open | boolean | false | | hideIcon | boolean | false | | icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | | iconDescription | string | "" | | iconName | string | "" | | tabindex | string | "0" | | tooltipId | string | -- | | triggerId | string | -- | | triggerText | string | "" | | ref | null | HTMLElement | null | | refTooltip | null | HTMLElement | null | | refIcon | null | HTMLElement | null | ### Slots - `...` ### 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 | | :---------- | :------------------------------------------------ | :------------ | | tooltipText | string | "" | | align | "start" | "center" | "end" | "center" | | direction | "top" | "bottom" | "bottom" | | id | string | -- | | ref | null | HTMLButtonElement | null | ### Slots - `...` ### 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 | | :---------- | :-------------------------------------------------------------- | :------------ | | tooltipText | string | "" | | align | "start" | "center" | "end" | "center" | | direction | "top" | "right" | "bottom" | "left" | "bottom" | | id | string | -- | | ref | null | HTMLButtonElement | null | ### Slots - `...` ### 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 | | :-------- | :------------------- | :------------ | | nested | boolean | false | ### Slots - `...` ### Forwarded events - `on:click` - `on:mouseover` - `on:mouseenter` - `on:mouseleave` ### Dispatched events No dispatched events. ---