mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity
carbon-components-svelte/COMPONENT_INDEX.md

207 KiB
Raw Blame History

Component Index

152 components exported from carbon-components-svelte 0.19.0

Accordion

Import path

import { Accordion } from "carbon-components-svelte";

Props

Prop name Type Default value Description
align "start" | "end" "end" Specify alignment of accordion item chevron icon.
size "sm" | "xl" -- Specify the size of the accordion.
disabled boolean false Set to true to disable the accordion.
skeleton boolean false Set to true to display the skeleton state.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

AccordionItem

Import path

import { AccordionItem } from "carbon-components-svelte";

Props

Prop name Type Default value Description
title string "title" Specify the title of the accordion item heading. Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>).
open boolean false Set to true to open the first accordion item.
disabled boolean false Set to true to disable the accordion item.
iconDescription string "Expand/Collapse" Specify the ARIA label for the accordion item chevron icon.

Slots

  • <slot>...</slot>

Forwarded events

  • on:animationend
  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:keydown

Dispatched events

No dispatched events.

AccordionSkeleton

Import path

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

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

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

Breadcrumb

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

BreadcrumbItem

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

BreadcrumbSkeleton

Import path

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

import { Button } from "carbon-components-svelte";

Props

Prop name Type Default value Description
kind "primary" | "secondary" | "tertiary" | "ghost" | "danger" "primary" Specify the kind of button.
size "default" | "field" | "small" "default" Specify the size of button.
hasIconOnly boolean false Set to true for the icon-only variant.
icon typeof import("carbon-icons-svelte/lib/Add16").default -- Specify the icon from carbon-icons-svelte to render.
iconDescription string -- Specify the ARIA label for the button icon.
tooltipAlignment "start" | "center" | "end" -- Set the alignment of the tooltip relative to the icon. hasIconOnly must be set to true.
tooltipPosition "top" | "right" | "bottom" | "left" -- Set the position of the tooltip relative to the icon.
as boolean false Set to true to render a custom HTML element. Props are destructured as props in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>).
skeleton boolean false Set to true to display the skeleton state.
disabled boolean false Set to true to disable the button.
href string -- Set the href to use an anchor link.
tabindex string "0" Specify the tabindex.
type string "button" Specify the type attribute for the button element.
ref null | HTMLAnchorElement | HTMLButtonElement null Obtain a reference to the HTML element.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

ButtonSet

Import path

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

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ButtonSkeleton

Import path

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

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

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

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:keydown
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

CodeSnippet

Import path

import { CodeSnippet } from "carbon-components-svelte";

Props

Prop name Type Default value Description
type "single" | "inline" | "multi" "single" Set the type of code snippet.
code string -- Set the code snippet text. Alternatively, use the default slot (e.g. <CodeSnippet>{code}</CodeSnippet>).
expanded boolean false Set to true to expand a multi-line code snippet (type="multi").
hideCopyButton boolean false Set to true to hide the copy button.
wrapText boolean false Set to true to wrap the text. Note that type must be "multi".
light boolean false Set to true to enable the light variant.
skeleton boolean false Set to true to display the skeleton state.
copyButtonDescription string -- Specify the ARIA label for the copy button icon.
copyLabel string -- Specify the ARIA label of the copy button.
feedback string "Copied!" Specify the feedback text displayed when clicking the snippet.
feedbackTimeout number 2000 Set the timeout duration (ms) to display feedback text.
showLessText string "Show less" Specify the show less text. type must be "multi".
showMoreText string "Show more" Specify the show more text. type must be "multi".
showMoreLess boolean false Set to true to enable the show more/less button.
id string -- Set an id for the code element.
ref null | HTMLPreElement null Obtain a reference to the pre HTML element.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:animationend

Dispatched events

No dispatched events.

CodeSnippetSkeleton

Import path

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

import { Column } from "carbon-components-svelte";

Props

// `Column` type definitions

type ColumnSize = boolean | number;

interface ColumnSizeDescriptor {
  span?: ColumnSize;
  offset: number;
}

type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
Prop name Type Default value Description
as boolean false Set to true to render a custom HTML element. Props are destructured as props in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>).
noGutter boolean false Set to true to remove the gutter.
noGutterLeft boolean false Set to true to remove the left gutter.
noGutterRight boolean false Set to true to remove the right gutter.
aspectRatio "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" -- Specify the aspect ratio of the column.
sm ColumnBreakpoint -- Set the small breakpoint.
md ColumnBreakpoint -- Set the medium breakpoint.
lg ColumnBreakpoint -- Set the large breakpoint.
xlg ColumnBreakpoint -- Set the extra large breakpoint.
max ColumnBreakpoint -- Set the maximum breakpoint.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ComboBox

Import path

import { ComboBox } from "carbon-components-svelte";

Props

// `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

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:transitionend

Dispatched events

  • on:submit
  • on:close
  • on:open

Content

Import path

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

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ContentSwitcher

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

  • on:change

Copy

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:animationend

Dispatched events

No dispatched events.

CopyButton

Import path

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

import { DataTable } from "carbon-components-svelte";

Props

Prop name Type Default value Description
headers {key: string; value: string; display?: (item) => string; sort?: (a, b) => number}[] [] Specify the data table headers.
rows Object[] [] Specify the rows the data table should render. keys defined in headers are used for the row ids.
size "compact" | "short" | "tall" -- Set the size of the data table.
title string "" Specify the title of the data table.
description string "" Specify the description of the data table.
zebra boolean false Set to true to use zebra styles.
sortable boolean false Set to true for the sortable variant.
expandable boolean false Set to true for the expandable variant. Automatically set to true if batchExpansion is true.
batchExpansion boolean false Set to true to enable batch expansion.
expandedRowIds string[] [] Specify the row ids to be expanded.
radio boolean false Set to true for the radio selection variant.
selectable boolean false Set to true for the selectable variant. Automatically set to true if radio or batchSelection are true.
batchSelection boolean false Set to true to enable batch selection.
selectedRowIds string[] [] Specify the row ids to be selected.
stickyHeader boolean false Set to true to enable a sticky header.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

  • on:click:header--expand
  • on:click
  • on:click:header
  • on:click:row
  • on:click:row--expand
  • on:click:cell

DataTableSkeleton

Import path

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

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

  • on:change

DatePickerInput

Import path

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

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

import { Dropdown } from "carbon-components-svelte";

Props

// `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

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

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

  • <slot name="above">...</slot>
  • <slot name="below">...</slot>

Forwarded events

  • on:click
  • on:keypress
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

FileUploader

Import path

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

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

import { FileUploaderDropContainer } from "carbon-components-svelte";

Props

// `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

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

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

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

import { FluidForm } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

Form

Import path

import { Form } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:submit

Dispatched events

No dispatched events.

FormGroup

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

FormItem

Import path

import { FormItem } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

FormLabel

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

Grid

Import path

import { Grid } from "carbon-components-svelte";

Props

Prop name Type Default value Description
as boolean false Set to true to render a custom HTML element. Props are destructured as props in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>).
condensed boolean false Set to true to use the condensed variant.
narrow boolean false Set to true to use the narrow variant.
fullWidth boolean false Set to true to use the fullWidth variant.
noGutter boolean false Set to true to remove the gutter.
noGutterLeft boolean false Set to true to remove the left gutter.
noGutterRight boolean false Set to true to remove the right gutter.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

Header

Import path

import { Header } from "carbon-components-svelte";

Props

Prop name Type Default value Description
expandedByDefault boolean true Set to false to hide the side nav by default.
isSideNavOpen boolean false Set to true to open the side nav.
uiShellAriaLabel string -- Specify the ARIA label for the header.
href string -- Specify the href attribute.
company string -- Specify the company name.
platformName string -- Specify the platform name. Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>).
ref null | HTMLAnchorElement null Obtain a reference to the HTML anchor element.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click

Dispatched events

No dispatched events.

HeaderAction

Import path

import { HeaderAction } from "carbon-components-svelte";

Props

Prop name Type Default value Description
isOpen boolean false Set to true to open the panel.
icon { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } -- Specify the icon props.
text string -- Specify the text. Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>).
ref null | HTMLButtonElement null Obtain a reference to the button HTML element.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click

Dispatched events

  • on:close

HeaderActionLink

Import path

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

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

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

  • <slot>...</slot>

Forwarded events

  • on:click

Dispatched events

No dispatched events.

HeaderNav

Import path

import { HeaderNav } from "carbon-components-svelte";

Props

Prop name Type Default value Description
ariaLabel string -- Specify the ARIA label for the nav.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

HeaderNavItem

Import path

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

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

  • <slot>...</slot>

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

import { HeaderPanelDivider } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

HeaderPanelLink

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click

Dispatched events

No dispatched events.

HeaderPanelLinks

Import path

import { HeaderPanelLinks } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

HeaderUtilities

Import path

import { HeaderUtilities } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

Icon

Import path

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

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

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

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

  • on:close

Link

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

ListBox

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:keydown
  • on:click

Dispatched events

No dispatched events.

ListBoxField

Import path

import { ListBoxField } from "carbon-components-svelte";

Props

// `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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:keydown
  • on:blur

Dispatched events

No dispatched events.

ListBoxMenu

Import path

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

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ListBoxMenuIcon

Import path

import { ListBoxMenuIcon } from "carbon-components-svelte";

Props

// `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

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

ListBoxSelection

Import path

import { ListBoxSelection } from "carbon-components-svelte";

Props

// `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

import { ListItem } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

Loading

Import path

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

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

  • <slot>...</slot>

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

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

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ModalFooter

Import path

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

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ModalHeader

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click

Dispatched events

No dispatched events.

MultiSelect

Import path

import { MultiSelect } from "carbon-components-svelte";

Props

// `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

import { NotificationActionButton } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

NotificationButton

Import path

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

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

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

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

NumberInput

Import path

import { NumberInput } from "carbon-components-svelte";

Props

// `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

  • <slot name="label">...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:input

Dispatched events

  • on:change

NumberInputSkeleton

Import path

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

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

OverflowMenu

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:keydown

Dispatched events

  • on:close

OverflowMenuItem

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:keydown

Dispatched events

No dispatched events.

Pagination

Import path

import { Pagination } from "carbon-components-svelte";

Props

Prop name Type Default value Description
page number 1 Specify the current page index.
totalItems number 0 Specify the total number of items.
disabled boolean false Set to true to disable the pagination.
forwardText string "Next page" Specify the forward button text.
backwardText string "Previous page" Specify the backward button text.
itemsPerPageText string "Items per page:" Specify the items per page text.
itemText (min: number, max: number) => string -- Override the item text.
itemRangeText (min: number, max: number, total: number) => string -- Override the item range text.
pageInputDisabled boolean false Set to true to disable the page input.
pageSizeInputDisabled boolean false Set to true to disable the page size input.
pageSize number 10 Specify the number of items to display in a page.
pageSizes number[] [10] Specify the available page sizes.
pagesUnknown boolean false Set to true if the number of pages is unknown.
pageText (page: number) => string -- Override the page text.
pageRangeText (current: number, total: number) => string -- Override the page range text.
id string -- Set an id for the top-level element.

Slots

No slots.

Forwarded events

No forwarded events.

Dispatched events

  • on:update

PaginationNav

Import path

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

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

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

import { ProgressIndicator } from "carbon-components-svelte";

Props

Prop name Type Default value Description
currentIndex number 0 Specify the current step index.
vertical boolean false Set to true to use the vertical variant.
spaceEqually boolean false Set to true to specify whether the progress steps should be split equally in size in the div.
preventChangeOnClick boolean false Set to true to prevent updating currentIndex.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

  • on:change

ProgressIndicatorSkeleton

Import path

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

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:keydown

Dispatched events

No dispatched events.

RadioButton

Import path

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

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

  • on:change

RadioButtonSkeleton

Import path

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

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

  • <slot>...</slot>

Forwarded events

  • on:change
  • on:keydown
  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

Row

Import path

import { Row } from "carbon-components-svelte";

Props

Prop name Type Default value Description
as boolean false Set to true to render a custom HTML element. Props are destructured as props in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>).
condensed boolean false Set to true to use the condensed variant.
narrow boolean false Set to true to use the narrow variant.
noGutter boolean false Set to true to remove the gutter.
noGutterLeft boolean false Set to true to remove the left gutter.
noGutterRight boolean false Set to true to remove the right gutter.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

Search

Import path

import { Search } from "carbon-components-svelte";

Props

Prop name Type Default value Description
small boolean false .
size "sm" | "lg" | "xl" "xl" Specify the size of the search input.
skeleton boolean false Set to true to display the skeleton state.
light boolean false Set to true to enable the light variant.
disabled boolean false Set to true to disable the search input.
value string "" Specify the value of the search input.
type string "text" Specify the type attribute of the search input.
placeholder string "Search..." Specify the placeholder attribute of the search input.
autocomplete "on" | "off" "off" Specify the autocomplete attribute.
autofocus boolean false Set to true to auto focus the search element.
closeButtonLabelText string "Clear search input" Specify the close button label text.
labelText string "" Specify the label text.
id string -- Set an id for the input element.
ref null | HTMLInputElement null Obtain a reference to the input HTML element.

Slots

No slots.

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:change
  • on:input
  • on:focus
  • on:blur

Dispatched events

No dispatched events.

SearchSkeleton

Import path

import { SearchSkeleton } from "carbon-components-svelte";

Props

Prop name Type Default value Description
small boolean false .
size "sm" | "lg" | "xl" "xl" Specify the size of the search input.

Slots

No slots.

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

Select

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:blur

Dispatched events

  • on:change

SelectItem

Import path

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

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

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

SelectSkeleton

Import path

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

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:keydown

Dispatched events

No dispatched events.

SideNav

Import path

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

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

SideNavItems

Import path

import { SideNavItems } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

SideNavLink

Import path

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

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

  • <slot>...</slot>

Forwarded events

  • on:click

Dispatched events

No dispatched events.

SideNavMenuItem

Import path

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

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

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

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

  • <slot>...</slot>

Forwarded events

  • on:click

Dispatched events

No dispatched events.

Slider

Import path

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

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

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

  • on:change

StructuredListBody

Import path

import { StructuredListBody } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

StructuredListCell

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

StructuredListHead

Import path

import { StructuredListHead } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

StructuredListInput

Import path

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

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:keydown

Dispatched events

No dispatched events.

StructuredListSkeleton

Import path

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

import { Switch } from "carbon-components-svelte";

Props

Prop name Type Default value Description
text string "Provide text" Specify the switch text. Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>).
selected boolean false Set to true for the switch to be selected.
disabled boolean false Set to true to disable the switch.
id string -- Set an id for the button element.
ref null | HTMLButtonElement null Obtain a reference to the button HTML element.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:keydown

Dispatched events

No dispatched events.

Tab

Import path

import { Tab } from "carbon-components-svelte";

Props

Prop name Type Default value Description
label string "" Specify the tab label. Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>).
href string "#" Specify the href attribute.
disabled boolean false Set to true to disable the tab.
tabindex string "0" Specify the tabindex.
id string -- Set an id for the top-level element.
ref null | HTMLAnchorElement null Obtain a reference to the anchor HTML element.

Slots

  • <slot>...</slot>

Forwarded events

  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

TabContent

Import path

import { TabContent } from "carbon-components-svelte";

Props

Prop name Type Default value Description
id string -- Set an id for the top-level element.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

Table

Import path

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

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

TableBody

Import path

import { TableBody } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

TableCell

Import path

import { TableCell } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

TableContainer

Import path

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

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

TableHead

Import path

import { TableHead } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

TableHeader

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:click

Dispatched events

No dispatched events.

TableRow

Import path

import { TableRow } from "carbon-components-svelte";

Props

Prop name Type Default value Description
isSelected boolean false Set to true to select the row.

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

Tabs

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:keypress
  • on:click

Dispatched events

  • on:change

TabsSkeleton

Import path

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

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

TagSkeleton

Import path

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

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

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

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

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

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

TileGroup

Import path

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

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

  • on:select

TimePicker

Import path

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?"`
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

  • <slot>...</slot>

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

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

ToastNotification

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

  • on:close

Toggle

Import path

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

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

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

import { ToggleSmallSkeleton } from "carbon-components-svelte";

Props

Prop name Type Default value Description
labelText string "" Specify the label text.
id string -- Set an id for the input element.

Slots

No slots.

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.

Toolbar

Import path

import { Toolbar } from "carbon-components-svelte";

Props

Prop name Type Default value Description
size "sm" | "default" "default" Specify the toolbar size.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ToolbarBatchActions

Import path

import { ToolbarBatchActions } from "carbon-components-svelte";

Props

Prop name Type Default value Description
formatTotalSelected (totalSelected: number) => string -- Override the total items selected text.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ToolbarContent

Import path

import { ToolbarContent } from "carbon-components-svelte";

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ToolbarSearch

Import path

import { ToolbarSearch } from "carbon-components-svelte";

Props

Prop name Type Default value Description
value string "" Specify the value of the search input.
expanded boolean false Set to true to expand the search bar.
persistent boolean false Set to true to keep the search bar expanded.
tabindex string "0" Specify the tabindex.
ref null | HTMLInputElement null Obtain a reference to the input HTML element.

Slots

No slots.

Forwarded events

  • on:change
  • on:input
  • on:focus
  • on:blur

Dispatched events

No dispatched events.

Tooltip

Import path

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

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

TooltipDefinition

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:focus

Dispatched events

No dispatched events.

TooltipIcon

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave
  • on:focus

Dispatched events

No dispatched events.

UnorderedList

Import path

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

  • <slot>...</slot>

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

No dispatched events.