# carbon-components-svelte [![NPM][npm]][npm-url] [![Build][build]][build-badge] > Svelte implementation of the [Carbon Design System](https://github.com/carbon-design-system) ## Getting Started `carbon-components-svelte` can be installed as a development dependency. ```bash yarn add -D carbon-components-svelte ``` ## Usage ```html ``` ## Available Components > 147 components in "carbon-components-svelte" - Accordion - [AccordionSkeleton](#accordionskeleton) - [Accordion](#accordion) - [AccordionItem](#accordionitem) - Breadcrumb - [BreadcrumbSkeleton](#breadcrumbskeleton) - [Breadcrumb](#breadcrumb) - [BreadcrumbItem](#breadcrumbitem) - Button - [ButtonSkeleton](#buttonskeleton) - [Button](#button) - Checkbox - [CheckboxSkeleton](#checkboxskeleton) - [Checkbox](#checkbox) - CodeSnippet - [CodeSnippetSkeleton](#codesnippetskeleton) - [CodeSnippet](#codesnippet) - [ComboBox](#combobox) - ComposedModal - [ComposedModal](#composedmodal) - [ModalBody](#modalbody) - [ModalFooter](#modalfooter) - [ModalHeader](#modalheader) - ContentSwitcher - [ContentSwitcher](#contentswitcher) - [Switch](#switch) - [Copy](#copy) - [CopyButton](#copybutton) - DataTable - [DataTable](#datatable) - [Table](#table) - [TableBody](#tablebody) - [TableCell](#tablecell) - [TableContainer](#tablecontainer) - [TableHead](#tablehead) - [TableHeader](#tableheader) - [TableRow](#tablerow) - [DataTableSkeleton](#datatableskeleton) - DatePicker - [DatePickerSkeleton](#datepickerskeleton) - [DatePicker](#datepicker) - [DatePickerInput](#datepickerinput) - Dropdown - [DropdownSkeleton](#dropdownskeleton) - [Dropdown](#dropdown) - FileUploader - [FileUploaderSkeleton](#fileuploaderskeleton) - [FileUploader](#fileuploader) - [FileUploaderButton](#fileuploaderbutton) - [FileUploaderDropContainer](#fileuploaderdropcontainer) - [FileUploaderItem](#fileuploaderitem) - [Filename](#filename) - [Form](#form) - [FormGroup](#formgroup) - [FormItem](#formitem) - [FormLabel](#formlabel) - Grid - [Column](#column) - [Grid](#grid) - [Row](#row) - Icon - [IconSkeleton](#iconskeleton) - [Icon](#icon) - [InlineLoading](#inlineloading) - [Link](#link) - ListBox - [ListBox](#listbox) - [ListBoxField](#listboxfield) - [ListBoxMenu](#listboxmenu) - [ListBoxMenuIcon](#listboxmenuicon) - [ListBoxMenuItem](#listboxmenuitem) - [ListBoxSelection](#listboxselection) - [ListItem](#listitem) - [Loading](#loading) - [Modal](#modal) - [MultiSelect](#multiselect) - Notification - [InlineNotification](#inlinenotification) - [NotificationActionButton](#notificationactionbutton) - [NotificationButton](#notificationbutton) - [NotificationIcon](#notificationicon) - [NotificationTextDetails](#notificationtextdetails) - [ToastNotification](#toastnotification) - NumberInput - [NumberInputSkeleton](#numberinputskeleton) - [NumberInput](#numberinput) - [OrderedList](#orderedlist) - OverflowMenu - [OverflowMenu](#overflowmenu) - [OverflowMenuItem](#overflowmenuitem) - Pagination - [PaginationSkeleton](#paginationskeleton) - [Pagination](#pagination) - PaginationNav - [PaginationItem](#paginationitem) - [PaginationNav](#paginationnav) - [PaginationOverflow](#paginationoverflow) - ProgressIndicator - [ProgressIndicatorSkeleton](#progressindicatorskeleton) - [ProgressIndicator](#progressindicator) - [ProgressStep](#progressstep) - RadioButton - [RadioButtonSkeleton](#radiobuttonskeleton) - [RadioButton](#radiobutton) - [RadioButtonGroup](#radiobuttongroup) - Search - [SearchSkeleton](#searchskeleton) - [Search](#search) - Select - [SelectSkeleton](#selectskeleton) - [Select](#select) - [SelectItem](#selectitem) - [SelectItemGroup](#selectitemgroup) - [SkeletonPlaceholder](#skeletonplaceholder) - [SkeletonText](#skeletontext) - Slider - [SliderSkeleton](#sliderskeleton) - [Slider](#slider) - StructuredList - [StructuredListSkeleton](#structuredlistskeleton) - [StructuredList](#structuredlist) - [StructuredListBody](#structuredlistbody) - [StructuredListCell](#structuredlistcell) - [StructuredListHead](#structuredlisthead) - [StructuredListInput](#structuredlistinput) - [StructuredListRow](#structuredlistrow) - Tabs - [Tab](#tab) - [TabContent](#tabcontent) - [Tabs](#tabs) - [TabsSkeleton](#tabsskeleton) - Tag - [TagSkeleton](#tagskeleton) - [Tag](#tag) - TextArea - [TextAreaSkeleton](#textareaskeleton) - [TextArea](#textarea) - TextInput - [PasswordInput](#passwordinput) - [TextInputSkeleton](#textinputskeleton) - [TextInput](#textinput) - Tile - [ClickableTile](#clickabletile) - [ExpandableTile](#expandabletile) - [RadioTile](#radiotile) - [SelectableTile](#selectabletile) - [Tile](#tile) - [TileGroup](#tilegroup) - TimePicker - [TimePicker](#timepicker) - [TimePickerSelect](#timepickerselect) - Toggle - [ToggleSkeleton](#toggleskeleton) - [Toggle](#toggle) - ToggleSmall - [ToggleSmallSkeleton](#togglesmallskeleton) - [ToggleSmall](#togglesmall) - [Tooltip](#tooltip) - [TooltipDefinition](#tooltipdefinition) - [TooltipIcon](#tooltipicon) - UIShell - [Content](#content) - [SkipToContent](#skiptocontent) - [Header](#header) - [HeaderAction](#headeraction) - [HeaderActionLink](#headeractionlink) - [HeaderActionSearch](#headeractionsearch) - [HeaderNav](#headernav) - [HeaderNavItem](#headernavitem) - [HeaderNavMenu](#headernavmenu) - [HeaderPanelDivider](#headerpaneldivider) - [HeaderPanelLink](#headerpanellink) - [HeaderPanelLinks](#headerpanellinks) - [HeaderUtilities](#headerutilities) - [HamburgerMenu](#hamburgermenu) - [SideNav](#sidenav) - [SideNavItems](#sidenavitems) - [SideNavLink](#sidenavlink) - [SideNavMenu](#sidenavmenu) - [SideNavMenuItem](#sidenavmenuitem) - [UnorderedList](#unorderedlist) ## Component Index ### AccordionSkeleton
Usage **Component Group:** Accordion **Import Path** ```js import { AccordionSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | count | number | 4 | | open | boolean | true |
--- ### Accordion
Usage **Component Group:** Accordion **Import Path** ```js import { Accordion } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :-------------------------------- | :------ | | align | "start" | "end" | "end" | | skeleton | boolean | false |
--- ### AccordionItem
Usage **Component Group:** Accordion **Import Path** ```js import { AccordionItem } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :------------------- | :---------------- | | title | string | "title" | | open | boolean | false | | iconDescription | string | "Expand/Collapse" |
--- ### BreadcrumbSkeleton
Usage **Component Group:** Breadcrumb **Import Path** ```js import { BreadcrumbSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :------------------- | :------ | | noTrailingSlash | boolean | false | | count | number | 3 |
--- ### Breadcrumb
Usage **Component Group:** Breadcrumb **Import Path** ```js import { Breadcrumb } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :------------------- | :------ | | noTrailingSlash | boolean | false | | skeleton | boolean | false |
--- ### BreadcrumbItem
Usage **Component Group:** Breadcrumb **Import Path** ```js import { BreadcrumbItem } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------ | :------------------- | :------ | | href | string | - | | isCurrentPage | boolean | false |
--- ### ButtonSkeleton
Usage **Component Group:** Button **Import Path** ```js import { ButtonSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | href | string | - | | small | boolean | false |
--- ### Button
Usage **Component Group:** Button **Import Path** ```js import { Button } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :--------------- | :----------------------------------------------------------------------------------------- | :-------- | | kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | | size | "default" | "field" | "small" | "default" | | hasIconOnly | boolean | false | | icon | typeof import("carbon-icons-svelte/lib/Add16").default | - | | iconDescription | string | - | | tooltipAlignment | "start" | "center" | "end" | - | | tooltipPosition | "top" | "right" | "bottom" | "left" | - | | as | boolean | false | | skeleton | boolean | false | | disabled | boolean | false | | href | string | - | | tabindex | string | "0" | | type | string | "button" | | ref | null | HTMLAnchorElement | HTMLButtonElement | null |
--- ### CheckboxSkeleton
Usage **Component Group:** Checkbox **Import Path** ```js import { CheckboxSkeleton } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### Checkbox
Usage **Component Group:** Checkbox **Import Path** ```js import { Checkbox } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------ | :---------------------------------------- | :------ | | checked | boolean | false | | indeterminate | boolean | false | | skeleton | boolean | false | | readonly | boolean | false | | disabled | boolean | false | | labelText | string | "" | | hideLabel | boolean | false | | name | string | "" | | title | string | - | | id | string | - | | ref | null | HTMLInputElement | null |
--- ### CodeSnippetSkeleton
Usage **Component Group:** CodeSnippet **Import Path** ```js import { CodeSnippetSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :--------------------------------------------------- | :------- | | type | "single" | "inline" | "multi" | "single" |
--- ### CodeSnippet
Usage **Component Group:** CodeSnippet **Import Path** ```js import { CodeSnippet } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------------- | :--------------------------------------------------- | :---------- | | type | "single" | "inline" | "multi" | "single" | | code | string | - | | expanded | boolean | false | | light | boolean | false | | skeleton | boolean | false | | copyButtonDescription | string | - | | copyLabel | string | - | | feedback | string | "Copied!" | | feedbackTimeout | number | 2000 | | showLessText | string | "Show more" | | showMoreLess | boolean | false | | id | string | - | | ref | null | HTMLPreElement | null |
--- ### ComboBox
Usage **Component Group:** ComboBox **Import Path** ```js import { ComboBox } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :--------------- | :---------------------------------------------------------- | :------------------------------ | | items | ComboBoxItem[] | [] | | itemToString | (item: ComboBoxItem) => string; | (item: ComboBoxItem) => string; | | selectedIndex | number | -1 | | value | string | "" | | size | "sm" | "xl" | - | | disabled | boolean | false | | titleText | string | "" | | placeholder | string | "" | | helperText | string | "" | | invalidText | string | "" | | invalid | boolean | false | | light | boolean | false | | open | boolean | false | | shouldFilterItem | (item: ComboBoxItem, value: string) => boolean | () => true | | translateWithId | (id: any) => string; | - | | id | string | - | | name | string | - | | ref | null | HTMLInputElement | null |
--- ### ComposedModal
Usage **Component Group:** ComposedModal **Import Path** ```js import { ComposedModal } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------------- | :---------------------------------------- | :--------------------------- | | size | "xs" | "sm" | "lg" | - | | open | boolean | false | | danger | boolean | false | | containerClass | string | "" | | selectorPrimaryFocus | string | "[data-modal-primary-focus]" | | ref | null | HTMLElement | null |
--- ### ModalBody
Usage **Component Group:** ComposedModal **Import Path** ```js import { ModalBody } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------------ | :------------------- | :------ | | hasForm | boolean | false | | hasScrollingContent | boolean | false |
--- ### ModalFooter
Usage **Component Group:** ComposedModal **Import Path** ```js import { ModalFooter } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------------- | :------------------- | :------ | | primaryButtonText | string | "" | | primaryButtonDisabled | boolean | false | | primaryClass | string | - | | secondaryButtonText | string | "" | | secondaryClass | string | - | | danger | boolean | false |
--- ### ModalHeader
Usage **Component Group:** ComposedModal **Import Path** ```js import { ModalHeader } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :------------------ | :------ | | title | string | "" | | label | string | "" | | labelClass | string | "" | | titleClass | string | "" | | closeClass | string | "" | | closeIconClass | string | "" | | iconDescription | string | "Close" |
--- ### ContentSwitcher
Usage **Component Group:** ContentSwitcher **Import Path** ```js import { ContentSwitcher } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------ | :------------------- | :------ | | selectedIndex | number | 0 | | light | boolean | false |
--- ### Switch
Usage **Component Group:** ContentSwitcher **Import Path** ```js import { Switch } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :----------------------------------------- | :------------- | | text | string | "Provide text" | | selected | boolean | false | | disabled | boolean | false | | id | string | - | | ref | null | HTMLButtonElement | null |
--- ### Copy
Usage **Component Group:** Copy **Import Path** ```js import { Copy } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :----------------------------------------- | :-------- | | feedback | string | "Copied!" | | feedbackTimeout | number | 2000 | | ref | null | HTMLButtonElement | null |
--- ### CopyButton
Usage **Component Group:** CopyButton **Import Path** ```js import { CopyButton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :------------------ | :------------------ | | iconDescription | string | "Copy to clipboard" |
--- ### DataTable
Usage **Component Group:** DataTable **Import Path** ```js import { DataTable } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :----------- | :-------------------------------------------------- | :------ | | headers | {key: string; value: string;} | [] | | rows | Object[] | [] | | size | "compact" | "short" | "tall" | - | | title | string | "" | | description | string | "" | | zebra | boolean | false | | sortable | boolean | false | | stickyHeader | boolean | false |
--- ### Table
Usage **Component Group:** DataTable **Import Path** ```js import { Table } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :--------------- | :-------------------------------------------------- | :------ | | size | "compact" | "short" | "tall" | - | | zebra | boolean | false | | useStaticWidth | boolean | false | | shouldShowBorder | boolean | false | | sortable | boolean | false | | stickyHeader | boolean | false |
--- ### TableBody
Usage **Component Group:** DataTable **Import Path** ```js import { TableBody } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### TableCell
Usage **Component Group:** DataTable **Import Path** ```js import { TableCell } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### TableContainer
Usage **Component Group:** DataTable **Import Path** ```js import { TableContainer } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :----------- | :------------------- | :------ | | title | string | "" | | description | string | "" | | stickyHeader | boolean | false |
--- ### TableHead
Usage **Component Group:** DataTable **Import Path** ```js import { TableHead } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### TableHeader
Usage **Component Group:** DataTable **Import Path** ```js import { TableHeader } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :------------------------- | :-------- | | scope | string | "col" | | translateWithId | () => string; | () => ""; | | id | string | - |
--- ### TableRow
Usage **Component Group:** DataTable **Import Path** ```js import { TableRow } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :--------- | :------------------- | :------ | | isSelected | boolean | false |
--- ### DataTableSkeleton
Usage **Component Group:** DataTableSkeleton **Import Path** ```js import { DataTableSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :-------------------- | :------ | | columns | number | 5 | | rows | number | 5 | | compact | boolean | false | | zebra | boolean | false | | headers | string[] | [] |
--- ### DatePickerSkeleton
Usage **Component Group:** DatePicker **Import Path** ```js import { DatePickerSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | range | boolean | false | | id | string | - |
--- ### DatePicker
Usage **Component Group:** DatePicker **Import Path** ```js import { DatePicker } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------- | :--------------------------------------------------- | :------------ | | datePickerType | "simple" | "single" | "range" | "simple" | | value | string | "" | | appendTo | HTMLElement | document.body | | dateFormat | string | "m/d/Y" | | maxDate | null | string | Date | null | | minDate | null | string | Date | null | | locale | string | "en" | | short | boolean | false | | light | boolean | false | | id | string | - |
--- ### DatePickerInput
Usage **Component Group:** DatePicker **Import Path** ```js import { DatePickerInput } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :---------------------------------------- | :------ | | size | "sm" | "xl" | - | | type | string | "text" | | placeholder | string | "" | | iconDescription | string | "" | | id | string | - | | invalid | boolean | false | | invalidText | string | "" | | ref | null | HTMLInputElement | null |
--- ### DropdownSkeleton
Usage **Component Group:** Dropdown **Import Path** ```js import { DropdownSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | inline | boolean | false |
--- ### Dropdown
Usage **Component Group:** Dropdown **Import Path** ```js import { Dropdown } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :------------------------------------------- | :--------------------------------------- | | items | DropdownItem[] | [] | | itemToString | (item: DropdownItem) => string; | (item: DropdownItem) => DropdownItemText | DropdownItemId; | | selectedIndex | number | -1 | | type | "default" | "inline" | "default" | | size | "sm" | "lg" | "xl" | - | | open | boolean | false | | inline | boolean | false | | light | boolean | false | | disabled | boolean | false | | titleText | string | "" | | invalid | boolean | false | | invalidText | string | "" | | helperText | string | "" | | label | string | - | | translateWithId | (id: any) => string; | - | | id | string | - | | name | string | - | | ref | null | HTMLButtonElement | null |
--- ### FileUploaderSkeleton
Usage **Component Group:** FileUploader **Import Path** ```js import { FileUploaderSkeleton } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### FileUploader
Usage **Component Group:** FileUploader **Import Path** ```js import { FileUploader } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :--------------- | :----------------------------------------------------------------------------------------- | :---------- | | status | "uploading" | "edit" | "complete" | "uploading" | | accept | string[] | [] | | files | string[] | [] | | multiple | boolean | false | | clearFiles | () => any; | () => void; | | labelDescription | string | "" | | labelTitle | string | "" | | kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | | buttonLabel | string | "" | | iconDescription | string | "" | | name | string | - |
--- ### FileUploaderButton
Usage **Component Group:** FileUploader **Import Path** ```js import { FileUploaderButton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------------ | :----------------------------------------------------------------------------------------- | :--------- | | accept | string[] | [] | | multiple | boolean | false | | disabled | boolean | false | | disableLabelChanges | boolean | false | | kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | | labelText | string | "Add file" | | role | string | "button" | | tabindex | string | "0" | | id | string | - | | name | string | - | | ref | null | HTMLInputElement | null |
--- ### FileUploaderDropContainer
Usage **Component Group:** FileUploader **Import Path** ```js import { FileUploaderDropContainer } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------ | :---------------------------------------- | :----------------------- | | accept | string[] | [] | | multiple | boolean | false | | validateFiles | (files: Files) => Files | (files: Files) => Files; | | labelText | string | "Add file" | | role | string | "button" | | disabled | boolean | false | | tabindex | string | "0" | | id | string | - | | name | string | "" | | ref | null | HTMLInputElement | null |
--- ### FileUploaderItem
Usage **Component Group:** FileUploader **Import Path** ```js import { FileUploaderItem } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :------------------------------------------------------- | :---------- | | status | "uploading" | "edit" | "complete" | "uploading" | | iconDescription | string | "" | | invalid | boolean | false | | errorSubject | string | "" | | errorBody | string | "" | | id | string | - | | name | string | "" |
--- ### Filename
Usage **Component Group:** FileUploader **Import Path** ```js import { Filename } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :------------------------------------------------------- | :---------- | | status | "uploading" | "edit" | "complete" | "uploading" | | iconDescription | string | "" | | invalid | boolean | false |
--- ### Form
Usage **Component Group:** Form **Import Path** ```js import { Form } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### FormGroup
Usage **Component Group:** FormGroup **Import Path** ```js import { FormGroup } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | invalid | boolean | false |
--- ### FormItem
Usage **Component Group:** FormItem **Import Path** ```js import { FormItem } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### FormLabel
Usage **Component Group:** FormLabel **Import Path** ```js import { FormLabel } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------ | :------ | | id | string | - |
--- ### Column
Usage **Component Group:** Grid **Import Path** ```js import { Column } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------ | :------------------------------------------------------------------------------------------------- | :------ | | as | boolean | false | | noGutter | boolean | false | | noGutterLeft | boolean | false | | noGutterRight | boolean | false | | aspectRatio | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | - | | sm | ColumnBreakpoint | - | | md | ColumnBreakpoint | - | | lg | ColumnBreakpoint | - | | xlg | ColumnBreakpoint | - | | max | ColumnBreakpoint | - | | | string[] | - |
--- ### Grid
Usage **Component Group:** Grid **Import Path** ```js import { Grid } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------ | :------------------- | :------ | | as | boolean | false | | condensed | boolean | false | | narrow | boolean | false | | fullWidth | boolean | false | | noGutter | boolean | false | | noGutterLeft | boolean | false | | noGutterRight | boolean | false |
--- ### Row
Usage **Component Group:** Grid **Import Path** ```js import { Row } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------ | :------------------- | :------ | | as | boolean | false | | condensed | boolean | false | | narrow | boolean | false | | noGutter | boolean | false | | noGutterLeft | boolean | false | | noGutterRight | boolean | false |
--- ### IconSkeleton
Usage **Component Group:** Icon **Import Path** ```js import { IconSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------ | :------ | | size | number | 16 |
--- ### Icon
Usage **Component Group:** Icon **Import Path** ```js import { Icon } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------------------------------------------------------ | :------ | | render | typeof import("carbon-icons-svelte/lib/Add16").default | - | | skeleton | boolean | false |
--- ### InlineLoading
Usage **Component Group:** InlineLoading **Import Path** ```js import { InlineLoading } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :----------------------------------------------------------------------- | :---------------- | | status | "active" | "inactive" | "finished" | "error" | "active" | | description | string | - | | iconDescription | string | "Expand/Collapse" | | successDelay | number | 1500 |
--- ### Link
Usage **Component Group:** Link **Import Path** ```js import { Link } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :--------------------------------------------------------------------- | :------ | | inline | boolean | false | | disabled | boolean | false | | ref | null | HTMLAnchorElement | HTMLParagraphElement | null |
--- ### ListBox
Usage **Component Group:** ListBox **Import Path** ```js import { ListBox } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :---------- | :------------------------------------- | :-------- | | size | "sm" | "xl" | - | | type | "default" | "inline" | "default" | | open | boolean | false | | light | boolean | false | | disable | boolean | false | | invalid | boolean | false | | invalidText | string | "" |
--- ### ListBoxField
Usage **Component Group:** ListBox **Import Path** ```js import { ListBoxField } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :------------------------------------------------------ | :-------------- | | disabled | boolean | false | | role | string | "combobox" | | tabindex | string | "-1" | | | { close: "close"; open: "open"; } | - | | translateWithId | (id: ListBoxFieldTranslationId) => string; | (id) => string; | | id | string | - | | ref | null | HTMLElement | null |
--- ### ListBoxMenu
Usage **Component Group:** ListBox **Import Path** ```js import { ListBoxMenu } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------ | :------ | | id | string | - |
--- ### ListBoxMenuIcon
Usage **Component Group:** ListBox **Import Path** ```js import { ListBoxMenuIcon } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :--------------------------------------------------------- | :-------------- | | open | boolean | false | | | { close: "close"; open: "open" } | - | | translateWithId | (id: ListBoxMenuIconTranslationId) => string; | (id) => string; |
--- ### ListBoxMenuItem
Usage **Component Group:** ListBox **Import Path** ```js import { ListBoxMenuItem } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :---------- | :------------------- | :------ | | active | boolean | false | | highlighted | boolean | false |
--- ### ListBoxSelection
Usage **Component Group:** ListBox **Import Path** ```js import { ListBoxSelection } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :---------------------------------------------------------------------- | :-------------- | | selectionCount | \* | - | | disabled | boolean | false | | | { clearAll: "clearAll"; clearSelection: "clearSelection" } | - | | translateWithId | (id: ListBoxSelectionTranslationId) => string; | (id) => string; | | ref | null | HTMLElement | null |
--- ### ListItem
Usage **Component Group:** ListItem **Import Path** ```js import { ListItem } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### Loading
Usage **Component Group:** Loading **Import Path** ```js import { Loading } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :---------- | :------------------- | :------------------------- | | small | boolean | false | | active | boolean | true | | withOverlay | boolean | false | | description | string | "Active loading indicator" | | id | string | - |
--- ### Modal
Usage **Component Group:** Modal **Import Path** ```js import { Modal } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------------- | :---------------------------------------- | :--------------------------- | | size | "xs" | "sm" | "lg" | - | | open | boolean | false | | danger | boolean | false | | passiveModal | boolean | false | | modalHeading | string | - | | modalLabel | string | - | | modalAriaLabel | string | - | | iconDescription | string | "Close the modal" | | hasForm | boolean | false | | hasScrollingContent | boolean | false | | primaryButtonText | string | "" | | primaryButtonDisabled | boolean | false | | shouldSubmitOnEnter | boolean | true | | secondaryButtonText | string | "" | | selectorPrimaryFocus | string | "[data-modal-primary-focus]" | | id | string | - | | ref | null | HTMLElement | null |
--- ### MultiSelect
Usage **Component Group:** MultiSelect **Import Path** ```js import { MultiSelect } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :---------------- | :------------------------------------------------------------------------ | :---------------------------------------------------------- | | items | MultiSelectItem[] | [] | | itemToString | (item: MultiSelectItem) => string; | (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId; | | selectedIds | MultiSelectItemId[] | [] | | value | string | "" | | size | "sm" | "lg" | "xl" | - | | type | "default" | "inline" | "default" | | selectionFeedback | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | | disabled | boolean | false | | filterable | boolean | false | | filterItem | (item: MultiSelectItem, value: string) => string; | ((item: MultiSelectItem, value: string) => string;) | | open | boolean | false | | light | boolean | false | | locale | string | "en" | | placeholder | string | "" | | sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem; | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | | translateWithId | (id: any) => string; | - | | titleText | string | "" | | useTitleInItem | boolean | false | | invalid | boolean | false | | invalidText | string | "" | | helperText | string | "" | | label | string | - | | id | string | - | | name | string | - |
--- ### InlineNotification
Usage **Component Group:** Notification **Import Path** ```js import { InlineNotification } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | | notificationType | "toast" | "inline" | "toast" | | kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | | lowContrast | boolean | false | | role | string | "alert" | | title | string | "Title" | | subtitle | string | "" | | hideCloseButton | boolean | false | | iconDescription | string | "Closes notification" |
--- ### NotificationActionButton
Usage **Component Group:** Notification **Import Path** ```js import { NotificationActionButton } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### NotificationButton
Usage **Component Group:** Notification **Import Path** ```js import { NotificationButton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :--------------- | :------------------------------------------------------------------ | :----------- | | notificationType | "toast" | "inline" | "toast" | | renderIcon | typeof import("carbon-icons-svelte/lib/Add16").default | - | | iconDescription | string | "Close icon" |
--- ### NotificationIcon
Usage **Component Group:** Notification **Import Path** ```js import { NotificationIcon } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | | kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | | notificationType | "toast" | "inline" | "toast" | | iconDescription | string | "Closes notification" |
--- ### NotificationTextDetails
Usage **Component Group:** Notification **Import Path** ```js import { NotificationTextDetails } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :--------------- | :----------------------------------- | :-------- | | notificationType | "toast" | "inline" | "toast" | | title | string | "Title" | | subtitle | string | "" | | caption | string | "Caption" |
--- ### ToastNotification
Usage **Component Group:** Notification **Import Path** ```js import { ToastNotification } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | | notificationType | "toast" | "inline" | "toast" | | kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | | lowContrast | boolean | false | | timeout | number | 0 | | role | string | "alert" | | title | string | "Title" | | subtitle | string | "" | | caption | string | "Caption" | | iconDescription | string | "Closes notification" | | hideCloseButton | boolean | false |
--- ### NumberInputSkeleton
Usage **Component Group:** NumberInput **Import Path** ```js import { NumberInputSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | hideLabel | boolean | false |
--- ### NumberInput
Usage **Component Group:** NumberInput **Import Path** ```js import { NumberInput } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :-------------------------------------------------------------- | :---------------------------------------- | | size | "sm" | "xl" | - | | value | string | "" | | step | number | 1 | | max | number | - | | min | number | - | | light | boolean | false | | readonly | boolean | false | | mobile | boolean | false | | allowEmpty | boolean | false | | disabled | boolean | false | | iconDescription | string | "" | | invalid | boolean | false | | invalidText | string | "Provide invalidText" | | helperText | string | "" | | label | string | "" | | hideLabel | boolean | false | | translateWithId | (id: NumberInputTranslationId) => string; | (id: NumberInputTranslationId) => string; | | | { increment: "increment"; decrement: "decrement" } | - | | id | string | - | | name | string | - | | ref | null | HTMLInputElement | null |
--- ### OrderedList
Usage **Component Group:** OrderedList **Import Path** ```js import { OrderedList } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | nested | boolean | false |
--- ### OverflowMenu
Usage **Component Group:** OverflowMenu **Import Path** ```js import { OverflowMenu } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :--------------- | :------------------------------------------------------------------ | :------------------------------- | | direction | "top" | "bottom" | "bottom" | | open | boolean | false | | light | boolean | false | | flipped | boolean | false | | menuOptionsClass | string | - | | icon | typeof import("carbon-icons-svelte/lib/Add16").default | - | | iconClass | string | - | | iconDescription | string | "Open and close list of options" | | id | string | - |
--- ### OverflowMenuItem
Usage **Component Group:** OverflowMenu **Import Path** ```js import { OverflowMenuItem } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :----------- | :------------------------------------------------------------------ | :------------- | | text | string | "Provide text" | | href | string | "" | | primaryFocus | boolean | false | | disabled | boolean | false | | hasDivider | boolean | false | | danger | boolean | false | | requireTitle | boolean | false | | id | string | - | | ref | null | HTMLAnchorElement | HTMLButtonElement | null |
--- ### PaginationSkeleton
Usage **Component Group:** Pagination **Import Path** ```js import { PaginationSkeleton } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### Pagination
Usage **Component Group:** Pagination **Import Path** ```js import { Pagination } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :---------------- | :---------------------------------------------------------------- | :--------------------------------------------------- | | page | number | 1 | | total | number | 0 | | disabled | boolean | false | | forwardText | string | "Next page" | | backwardText | string | "Previous page" | | itemsPerPageText | string | "Items per page:" | | itemText | (min: number, max: number) => string; | (min: number, max: number) => string; | | itemRangeText | (min: number, max: number, total: number) => string; | (min: number, max: number, total: number) => string; | | pageInputDisabled | boolean | false | | pageSize | number | 10 | | pageSizes | number[] | [10] | | pagesUnknown | boolean | false | | pageText | (page: number) => string; | (current: number) => string; | | pageRangeText | (current: number, total: number) => string; | (current: number, total: number) => string; | | id | string | - |
--- ### PaginationItem
Usage **Component Group:** PaginationNav **Import Path** ```js import { PaginationItem } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | page | number | 0 | | active | boolean | false |
--- ### PaginationNav
Usage **Component Group:** PaginationNav **Import Path** ```js import { PaginationNav } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :----------- | :------------------- | :---------- | | page | number | 0 | | total | number | 10 | | shown | number | 10 | | loop | boolean | false | | forwardText | string | "Next page" | | backwardText | string | "Next page" | | | 4 | - |
--- ### PaginationOverflow
Usage **Component Group:** PaginationNav **Import Path** ```js import { PaginationOverflow } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------ | :------ | | fromIndex | number | 0 | | count | number | 0 |
--- ### ProgressIndicatorSkeleton
Usage **Component Group:** ProgressIndicator **Import Path** ```js import { ProgressIndicatorSkeleton } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### ProgressIndicator
Usage **Component Group:** ProgressIndicator **Import Path** ```js import { ProgressIndicator } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :----------- | :------------------ | :------ | | currentIndex | number | 0 |
--- ### ProgressStep
Usage **Component Group:** ProgressIndicator **Import Path** ```js import { ProgressStep } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------- | :------------------- | :------ | | complete | boolean | false | | current | boolean | false | | disabled | boolean | false | | invalid | boolean | false | | descripton | string | "" | | label | string | "" | | secondaryLabel | string | "" | | id | string | - |
--- ### RadioButtonSkeleton
Usage **Component Group:** RadioButton **Import Path** ```js import { RadioButtonSkeleton } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### RadioButton
Usage **Component Group:** RadioButton **Import Path** ```js import { RadioButton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------ | :---------------------------------------- | :------ | | value | string | "" | | checked | boolean | false | | disabled | boolean | false | | labelPosition | "right" | "left" | "right" | | labelText | string | "" | | hideLabel | boolean | false | | id | string | - | | name | string | "" | | ref | null | HTMLInputElement | null |
--- ### RadioButtonGroup
Usage **Component Group:** RadioButtonGroup **Import Path** ```js import { RadioButtonGroup } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------ | :------------------------------------------ | :----------- | | selected | string | - | | disabled | boolean | false | | labelPosition | "right" | "left" | "right" | | orientation | "horizontal" | "vertical" | "horizontal" |
--- ### SearchSkeleton
Usage **Component Group:** Search **Import Path** ```js import { SearchSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | small | boolean | false |
--- ### Search
Usage **Component Group:** Search **Import Path** ```js import { Search } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------------- | :---------------------------------------- | :------------------- | | small | boolean | false | | size | "sm" | "lg" | - | | skeleton | boolean | false | | light | boolean | false | | value | string | "text" | | type | string | "text" | | placeholder | string | "Search..." | | autocomplete | "on" | "off" | "off" | | autofocus | boolean | false | | closeButtonLabelText | string | "Clear search input" | | labelText | string | "" | | id | string | - | | ref | null | HTMLInputElement | null |
--- ### SelectSkeleton
Usage **Component Group:** Select **Import Path** ```js import { SelectSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | hideLabel | boolean | false |
--- ### Select
Usage **Component Group:** Select **Import Path** ```js import { Select } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :---------- | :----------------------------------------- | :------ | | selected | string | - | | size | "sm" | "xl" | - | | inline | boolean | false | | light | boolean | false | | disabled | boolean | false | | id | string | - | | name | string | - | | invalid | boolean | false | | invalidText | string | "" | | helperText | string | "" | | noLabel | boolean | false | | labelText | string | "" | | hideLabel | boolean | false | | ref | null | HTMLSelectElement | null |
--- ### SelectItem
Usage **Component Group:** Select **Import Path** ```js import { SelectItem } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### SelectItemGroup
Usage **Component Group:** Select **Import Path** ```js import { SelectItemGroup } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :-------------- | | disabled | boolean | false | | label | string | "Provide label" |
--- ### SkeletonPlaceholder
Usage **Component Group:** SkeletonPlaceholder **Import Path** ```js import { SkeletonPlaceholder } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### SkeletonText
Usage **Component Group:** SkeletonText **Import Path** ```js import { SkeletonText } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :-------------------- | :------ | | lines | number | 3 | | heading | boolean | false | | paragraph | boolean | false | | width | string | "100%" | | | number[] | - |
--- ### SliderSkeleton
Usage **Component Group:** Slider **Import Path** ```js import { SliderSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | hideLabel | boolean | false |
--- ### Slider
Usage **Component Group:** Slider **Import Path** ```js import { Slider } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :----------------------------------- | :------ | | id | string | - | | invalid | boolean | false | | labelText | string | "" | | light | boolean | false | | name | string | "" | | ref | null | HTMLElement | null |
--- ### StructuredListSkeleton
Usage **Component Group:** StructuredList **Import Path** ```js import { StructuredListSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | rows | number | 5 | | border | boolean | false |
--- ### StructuredList
Usage **Component Group:** StructuredList **Import Path** ```js import { StructuredList } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | selected | string | - | | border | boolean | false | | selection | boolean | false |
--- ### StructuredListBody
Usage **Component Group:** StructuredList **Import Path** ```js import { StructuredListBody } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### StructuredListCell
Usage **Component Group:** StructuredList **Import Path** ```js import { StructuredListCell } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | head | boolean | false | | noWrap | boolean | false |
--- ### StructuredListHead
Usage **Component Group:** StructuredList **Import Path** ```js import { StructuredListHead } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### StructuredListInput
Usage **Component Group:** StructuredList **Import Path** ```js import { StructuredListInput } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :---------------------------------------- | :------ | | checked | boolean | false | | title | string | "title" | | value | string | "value" | | id | string | - | | name | string | "" | | ref | null | HTMLInputElement | null |
--- ### StructuredListRow
Usage **Component Group:** StructuredList **Import Path** ```js import { StructuredListRow } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | head | boolean | false | | label | boolean | false | | tabindex | string | "0" |
--- ### Tab
Usage **Component Group:** Tabs **Import Path** ```js import { Tab } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------ | :------ | | id | string | - |
--- ### TabContent
Usage **Component Group:** Tabs **Import Path** ```js import { TabContent } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------ | :------ | | id | string | - |
--- ### Tabs
Usage **Component Group:** Tabs **Import Path** ```js import { Tabs } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### TabsSkeleton
Usage **Component Group:** Tabs **Import Path** ```js import { TabsSkeleton } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### TagSkeleton
Usage **Component Group:** Tag **Import Path** ```js import { TagSkeleton } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### Tag
Usage **Component Group:** Tag **Import Path** ```js import { Tag } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | | type | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | - | | filter | boolean | false | | disabled | boolean | false | | skeleton | boolean | false | | title | string | "Clear filter" | | id | string | - |
--- ### TextAreaSkeleton
Usage **Component Group:** TextArea **Import Path** ```js import { TextAreaSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | hideLabel | boolean | false |
--- ### TextArea
Usage **Component Group:** TextArea **Import Path** ```js import { TextArea } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :---------- | :------------------------------------------- | :------ | | value | string | "" | | placeholder | string | "" | | cols | number | 50 | | rows | number | 4 | | light | boolean | false | | disabled | boolean | false | | helperText | string | "" | | labelText | string | "" | | hideLabel | boolean | false | | invalid | boolean | false | | invalidText | string | "" | | id | string | - | | name | string | - | | ref | null | HTMLTextAreaElement | null |
--- ### PasswordInput
Usage **Component Group:** TextInput **Import Path** ```js import { PasswordInput } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :---------------- | :-------------------------------------------------------------- | :-------------- | | size | "sm" | "xl" | - | | value | string | "" | | type | string | "password" | | placeholder | string | "" | | hidePasswordLabel | string | "Hide password" | | showPasswordLabel | string | "Show password" | | tooltipAlignment | "start" | "center" | "end" | "center" | | tooltipPosition | "top" | "right" | "bottom" | "left" | "bottom" | | light | boolean | false | | disabled | boolean | false | | helperText | string | "" | | labelText | string | "" | | hideLabel | boolean | false | | invalid | boolean | false | | invalidText | string | "" | | id | string | - | | name | string | - | | ref | null | HTMLInputElement | null |
--- ### TextInputSkeleton
Usage **Component Group:** TextInput **Import Path** ```js import { TextInputSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | hideLabel | boolean | false |
--- ### TextInput
Usage **Component Group:** TextInput **Import Path** ```js import { TextInput } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :---------- | :---------------------------------------- | :------ | | size | "sm" | "xl" | - | | value | string | "" | | type | string | "" | | placeholder | string | "" | | light | boolean | false | | disabled | boolean | false | | helperText | string | "" | | id | string | - | | name | string | - | | labelText | string | "" | | hideLabel | boolean | false | | invalid | boolean | false | | invalidText | string | "" | | ref | null | HTMLInputElement | null |
--- ### ClickableTile
Usage **Component Group:** Tile **Import Path** ```js import { ClickableTile } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | clicked | boolean | false | | light | boolean | false |
--- ### ExpandableTile
Usage **Component Group:** Tile **Import Path** ```js import { ExpandableTile } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------------- | :----------------------------------- | :-------------------------- | | expanded | boolean | false | | light | boolean | false | | tileMaxHeight | number | 0 | | tilePadding | number | 0 | | tileCollapsedIconText | string | "Interact to expand Tile" | | tileExpandedIconText | string | "Interact to collapse Tile" | | tabindex | string | "0" | | id | string | - | | ref | null | HTMLElement | null |
--- ### RadioTile
Usage **Component Group:** Tile **Import Path** ```js import { RadioTile } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :------------------- | :--------------- | | checked | boolean | false | | light | boolean | false | | value | string | "" | | tabindex | string | "0" | | iconDescription | string | "Tile checkmark" | | id | string | - | | name | string | "" |
--- ### SelectableTile
Usage **Component Group:** Tile **Import Path** ```js import { SelectableTile } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :---------------------------------------- | :--------------- | | selected | boolean | false | | light | boolean | false | | title | string | "title" | | value | string | "value" | | tabindex | string | "0" | | iconDescription | string | "Tile checkmark" | | id | string | - | | name | string | "" | | ref | null | HTMLInputElement | null |
--- ### Tile
Usage **Component Group:** Tile **Import Path** ```js import { Tile } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | light | boolean | false |
--- ### TileGroup
Usage **Component Group:** Tile **Import Path** ```js import { TileGroup } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | selected | string | - | | disabled | boolean | false | | legend | string | - |
--- ### TimePicker
Usage **Component Group:** TimePicker **Import Path** ```js import { TimePicker } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :---------- | :---------------------------------------- | :--------------------- | | value | string | "" | | type | string | "text" | | placeholder | string | "hh=mm" | | pattern | string | "(1[012] | [1-9]):[0-5][0-9](\\s)?" | | maxLength | number | 5 | | light | boolean | false | | disabled | boolean | false | | labelText | string | "" | | hideLabel | boolean | false | | invalid | boolean | false | | invalidText | string | "Invalid time format." | | id | string | - | | name | string | - | | ref | null | HTMLInputElement | null |
--- ### TimePickerSelect
Usage **Component Group:** TimePicker **Import Path** ```js import { TimePickerSelect } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :----------------------------------------- | :---------------- | | value | string | "" | | disabled | boolean | false | | iconDescription | string | "Expand/Collapse" | | labelText | string | "" | | hideLabel | boolean | false | | id | string | - | | name | string | - | | ref | null | HTMLSelectElement | null |
--- ### ToggleSkeleton
Usage **Component Group:** Toggle **Import Path** ```js import { ToggleSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------ | :------ | | labelText | string | "" | | id | string | - |
--- ### Toggle
Usage **Component Group:** Toggle **Import Path** ```js import { Toggle } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | toggled | boolean | false | | disabled | boolean | false | | labelA | string | "Off" | | labelB | string | "On" | | labelText | string | "" | | id | string | - | | name | string | - |
--- ### ToggleSmallSkeleton
Usage **Component Group:** ToggleSmall **Import Path** ```js import { ToggleSmallSkeleton } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------ | :------ | | labelText | string | "" | | id | string | - |
--- ### ToggleSmall
Usage **Component Group:** ToggleSmall **Import Path** ```js import { ToggleSmall } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | toggled | boolean | false | | disabled | boolean | false | | labelA | string | "Off" | | labelB | string | "On" | | labelText | string | "" | | id | string | - | | name | string | - |
--- ### Tooltip
Usage **Component Group:** Tooltip **Import Path** ```js import { Tooltip } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :------------------------------------------------------------------ | :------------ | | direction | "top" | "right" | "bottom" | "left" | "bottom" | | open | boolean | false | | hideIcon | boolean | false | | icon | typeof import("carbon-icons-svelte/lib/Add16").default | Information16 | | iconDescription | string | "" | | iconName | string | "" | | tabindex | string | "0" | | tooltipId | string | - | | triggerId | string | - | | triggerText | string | "" | | ref | null | HTMLElement | null |
--- ### TooltipDefinition
Usage **Component Group:** TooltipDefinition **Import Path** ```js import { TooltipDefinition } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :---------- | :------------------------------------------------ | :------- | | tooltipText | string | "" | | align | "start" | "center" | "end" | "center" | | direction | "top" | "bottom" | "bottom" | | id | string | - | | ref | null | HTMLButtonElement | null |
--- ### TooltipIcon
Usage **Component Group:** TooltipIcon **Import Path** ```js import { TooltipIcon } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :---------- | :-------------------------------------------------------------- | :------- | | tooltipText | string | "" | | align | "start" | "center" | "end" | "center" | | direction | "top" | "right" | "bottom" | "left" | "bottom" | | id | string | - | | ref | null | HTMLButtonElement | null |
--- ### Content
Usage **Component Group:** UIShell **Import Path** ```js import { Content } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------ | :------------- | | id | string | "main-content" |
--- ### SkipToContent
Usage **Component Group:** UIShell **Import Path** ```js import { SkipToContent } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------ | :-------------- | | href | string | "#main-content" | | tabindex | string | "0" |
--- ### UnorderedList
Usage **Component Group:** UnorderedList **Import Path** ```js import { UnorderedList } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | nested | boolean | false |
--- ### Header
Usage **Component Group:** UIShell **Import Path** ```js import { Header } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :--------------- | :------------------- | :------ | | isSideNavOpen | boolean | false | | uiShellAriaLabel | string | - | | href | string | - | | company | string | - | | platformName | string | - |
--- ### HeaderAction
Usage **Component Group:** UIShell **Import Path** ```js import { HeaderAction } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :-------------------------------------------------------------------------------------------------- | :------ | | isOpen | boolean | false | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - | | text | string | - |
--- ### HeaderActionLink
Usage **Component Group:** UIShell **Import Path** ```js import { HeaderActionLink } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :----------- | :-------------------------------------------------------------------------------------------------- | :------ | | linkIsActive | boolean | false | | href | string | - | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - |
--- ### HeaderActionSearch
Usage **Component Group:** UIShell **Import Path** ```js import { HeaderActionSearch } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :------------- | :------------------- | :------ | | searchIsActive | boolean | false |
--- ### HeaderNav
Usage **Component Group:** UIShell **Import Path** ```js import { HeaderNav } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------ | :------ | | ariaLabel | string | - |
--- ### HeaderNavItem
Usage **Component Group:** UIShell **Import Path** ```js import { HeaderNavItem } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------ | :------ | | href | string | - | | text | string | - |
--- ### HeaderNavMenu
Usage **Component Group:** UIShell **Import Path** ```js import { HeaderNavMenu } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------------- | :------------------- | :---------------- | | expanded | boolean | false | | href | string | "/" | | text | string | - | | iconDescription | string | "Expand/Collapse" |
--- ### HeaderPanelDivider
Usage **Component Group:** UIShell **Import Path** ```js import { HeaderPanelDivider } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### HeaderPanelLink
Usage **Component Group:** UIShell **Import Path** ```js import { HeaderPanelLink } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------ | :------ | | href | string | - |
--- ### HeaderPanelLinks
Usage **Component Group:** UIShell **Import Path** ```js import { HeaderPanelLinks } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### HeaderUtilities
Usage **Component Group:** UIShell **Import Path** ```js import { HeaderUtilities } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### HamburgerMenu
Usage **Component Group:** UIShell **Import Path** ```js import { HamburgerMenu } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | ariaLabel | string | - | | isOpen | boolean | false |
--- ### SideNav
Usage **Component Group:** UIShell **Import Path** ```js import { SideNav } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :------------------- | :------ | | ariaLabel | string | - | | isOpen | boolean | false |
--- ### SideNavItems
Usage **Component Group:** UIShell **Import Path** ```js import { SideNavItems } from "carbon-components-svelte"; ``` **API** No exported props.
--- ### SideNavLink
Usage **Component Group:** UIShell **Import Path** ```js import { SideNavLink } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :--------- | :-------------------------------------------------------------------------------------------------- | :------ | | isSelected | boolean | false | | href | string | - | | text | string | - | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - |
--- ### SideNavMenu
Usage **Component Group:** UIShell **Import Path** ```js import { SideNavMenu } from "carbon-components-svelte"; ``` **API** | Prop name | Type | Default | | :-------- | :-------------------------------------------------------------------------------------------------- | :------ | | expanded | boolean | - | | text | string | - | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - |
--- ### SideNavMenuItem
Usage **Component Group:** UIShell **Import Path** ```js import { SideNavMenuItem } from "carbon-components-svelte"; ``` **API** No exported props.
--- ## Contributing Refer to the [Contributing guidelines](CONTRIBUTING.md). ## [Changelog](CHANGELOG.md) ## License [Apache 2.0](LICENSE) [npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=blue [npm-url]: https://npmjs.com/package/carbon-components-svelte [build]: https://travis-ci.com/ibm/carbon-components-svelte.svg?branch=master [build-badge]: https://travis-ci.com/ibm/carbon-components-svelte