) |
| 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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. ) |
| 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
- `...`
### 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
- `...`
### 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
- `...`
### 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. {`code`}) |
| 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
- `...`
### 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. ...) |
| 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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;}[] | -- | 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 |
| stickyHeader | boolean | false | Set to `true` to enable a sticky header |
### 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 | 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
- `...`
### 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
- `...`
- `...`
### 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
- `...`
### 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 | 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
- `...`
### 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 | Description |
| :-------- | :------------------ | :------------ | :---------------------------------------- |
| id | string | -- | Set an id to be used by the label element |
### 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 | Description |
| :------------ | :------------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as | boolean | false | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. ...) |
| 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
- `...`
### 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. ...) |
| ref | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
### 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 | 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.
...
) |
| ref | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
### 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 | 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
- `...`
### 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
- `...`
### 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
- `...`
### 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 | Description |
| :-------- | :----------------------------------------- | :------------ | :-------------------------------------------- |
| href | string | -- | Specify the `href` attribute |
| ref | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
### 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 | 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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[] | -- | 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 |
### 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 | 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
- `...`
### 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
- `...`
### 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
- `...`
### 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. ...) |
| 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
- `...`
### 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 | Set to `true` to use the small variant |
| size | "sm" | "lg" | -- | 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`
### 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 | 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.
---
## 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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 | 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
- `...`
### 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
- `...`
### 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
- `...`
### 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 | Description |
| :-------- | :------------------- | :------------ | :-------------------------------- |
| head | boolean | false | Set to `true` to use as a header |
| noWrap | boolean | false | Set to `true` to prevent wrapping |
### 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 | 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
- `...`
### 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. ...) |
| 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
- `...`
### 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. Label) |
| 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
- `...`
### 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
- `...`
### 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
- `...`
### 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 | 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
- `...`
### 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 | 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### 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.
---
## 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
- `...`
### 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
- `...`
### 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
- `...`
### 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
- `...`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---