Carbon Components Svelte

https://svelte.carbondesignsystem.com/components/
Admin
Carbon Components Svelte is a comprehensive library of reusable UI components built with Svelte that...
Tokens:164,228
Snippets:884
Trust Score:9.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### InlineLoading UX Example

Source: https://svelte.carbondesignsystem.com/components/InlineLoading

An example demonstrating the integration of the InlineLoading component in a user experience scenario.

```APIDOC
## InlineLoading UX Example

### Description
Illustrates a real-world scenario of integrating the loading indicator, showing dynamic state changes.

### Method
N/A (Component)

### Endpoint
N/A (Component)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```svelte
<script>
  import { Button, ButtonSet, InlineLoading } from "carbon-components-svelte";
  import { onDestroy } from "svelte";

  const descriptionMap = {
    active: "Submitting...",
    finished: "Success",
    inactive: "Cancelling...",
  };

  const stateMap = {
    active: "finished",
    inactive: "dormant",
    finished: "dormant",
  };

  let timeout = undefined;
  let state = "dormant"; // "dormant" | "active" | "finished" | "inactive"

  function reset(incomingState) {
    if (typeof timeout === "number") {
      clearTimeout(timeout);
    }

    if (incomingState) {
      timeout = setTimeout(() => {
        state = incomingState;
      }, 2000);
    }
  }

  onDestroy(reset);

  $: reset(stateMap[state]);
</script>

<ButtonSet>
  <Button
    kind="ghost"
    disabled={state === "dormant" || state === "finished"}
    on:click={() => (state = "inactive")}
  >
    Cancel
  </Button>
  {#if state !== "dormant"}
    <InlineLoading status={state} description={descriptionMap[state]} />
  {:else}
    <Button on:click={() => (state = "active")}>Submit</Button>
  {/if}
</ButtonSet>
```

### Response
#### Success Response (200)
N/A (Component)

#### Response Example
N/A (Component)
```

--------------------------------

### Link Usage Examples

Source: https://svelte.carbondesignsystem.com/components/Link

Examples demonstrating various ways to use the Link component, including default, target=_blank, outbound, inline, with icons, different sizes, disabled state, and visited styles.

```APIDOC
## Default Link

Create a basic link with the default styling.

```svelte
<script>
  import { Link } from "carbon-components-svelte";
</script>

<Link href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
```
```

```APIDOC
## Target _blank Link

For external links, the component automatically adds security attributes. You can override the `rel` attribute if needed.

```svelte
<script>
  import { Link } from "carbon-components-svelte";
</script>

<Link href="https://www.carbondesignsystem.com/" target="_blank">
  Carbon Design System
</Link>
```
```

```APIDOC
## OutboundLink

Use `OutboundLink` as a convenient alternative for external links.

```svelte
<script>
  import { OutboundLink } from "carbon-components-svelte";
</script>

<OutboundLink href="https://www.carbondesignsystem.com/">
  Carbon Design System
</OutboundLink>
```
```

```APIDOC
## Inline Variant

Create links that flow naturally with surrounding text.

```svelte
<script>
  import { Link } from "carbon-components-svelte";
</script>

<div>
  Visit the
  <Link inline href="https://www.carbondesignsystem.com/">
    Carbon Design System
  </Link>.
</div>
```
```

```APIDOC
## Link with Icon

Add icons to links for better visual context. Note that `inline` must be `false` when using icons.

```svelte
<script>
  import { Link } from "carbon-components-svelte";
  import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
</script>

<div>
  Visit the
  <Link href="https://www.carbondesignsystem.com/" icon={Carbon}>
    Carbon Design System
  </Link>.
</div>
```
```

```APIDOC
## Size Variants

The component supports different sizes to match your design needs.

```svelte
<script>
  import { Link } from "carbon-components-svelte";
</script>

<Link size="lg" href="https://www.carbondesignsystem.com/">Large link</Link>
<br />
<Link href="https://www.carbondesignsystem.com/">Default link</Link>
<br />
<Link size="sm" href="https://www.carbondesignsystem.com/">Small link</Link>
```
```

```APIDOC
## Disabled State

Disabled links render as plain text while maintaining accessibility.

```svelte
<script>
  import { Link } from "carbon-components-svelte";
</script>

<Link disabled href="https://www.carbondesignsystem.com/">Disabled link</Link>
```
```

```APIDOC
## Visited Styles

Show visited state styling for links.

```svelte
<script>
  import { Link } from "carbon-components-svelte";
</script>

<Link visited href="https://www.carbondesignsystem.com/">Visited link</Link>
```
```

--------------------------------

### Svelte Pagination: Default Component Setup

Source: https://svelte.carbondesignsystem.com/components/Pagination

Demonstrates the basic setup of the Svelte Pagination component. It configures the total number of items and available page size options.

```svelte
<script>
  import { Pagination } from "carbon-components-svelte";
</script>

<Pagination totalItems={102} pageSizes={[10, 15, 20]} />

```

--------------------------------

### Reactive Example

Source: https://svelte.carbondesignsystem.com/components/LocalStorage

Example demonstrating how the LocalStorage component maintains state across page reloads.

```APIDOC
## Reactive Example

### Description
See how the component maintains state across page reloads. Toggle the switch and refresh the page to see the persisted state.

### Method
Not applicable (UI component)

### Endpoint
Not applicable (Client-side component)

### Request Example
```html
<script>
  import { LocalStorage, Toggle } from "carbon-components-svelte";

  let toggled = false;
  let events = [];

  $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
</script>

<LocalStorage
  key="dark-mode"
  bind:value={toggled}
  on:save={() => {
    events = [...events, { event: "on:save" }];
  }}
  on:update={({ detail }) => {
    events = [...events, { event: "on:update", detail }];
  }}
/>

<Toggle size="sm" labelText="Dark mode" bind:toggled />

<pre>{JSON.stringify(events, null, 2)}</pre>
```

### Response
#### Success Response (200)
Not applicable (Client-side component)

#### Response Example
```json
[
  {
    "event": "on:update",
    "detail": {
      "prevValue": false,
      "value": true
    }
  }
]
```
```

--------------------------------

### Clear Item/All Example

Source: https://svelte.carbondesignsystem.com/components/LocalStorage

Example demonstrating how to use the `clearItem` and `clearAll` methods of the LocalStorage component.

```APIDOC
## Clear Item, Clear All

### Description
The component provides methods to manage stored data: `clearItem` (Remove a specific key-value pair) and `clearAll` (Remove all stored data). Use `bind:this` to access these methods. In this example, try toggling the switch, refreshing the page, then clearing the storage.

### Method
Not applicable (UI component)

### Endpoint
Not applicable (Client-side component)

### Request Example
```html
<script>
  import { LocalStorage, Toggle, Button } from "carbon-components-svelte";

  let storage;
  let toggled = false;

  $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
</script>

<LocalStorage bind:this={storage} bind:value={toggled} />

<Toggle size="sm" labelText="Dark mode" bind:toggled />

<Button size="small" on:click={storage.clearAll}>Clear storage</Button>
```

### Response
#### Success Response (200)
Not applicable (Client-side component)

#### Response Example
No specific response example for button clicks, as it manipulates browser storage directly.
```

--------------------------------

### Default Tile Example

Source: https://svelte.carbondesignsystem.com/components/Tile

Creates a basic tile container for displaying content.

```APIDOC
## Default Tile

### Description

Create a basic tile container for your content.

### Method

Not Applicable (Component Usage)

### Endpoint

Not Applicable (Component Usage)

### Request Example

```svelte
<script>
  import { Tile } from "carbon-components-svelte";
</script>

<Tile>Content</Tile>
```

### Response

Not Applicable (Component Usage)
```

--------------------------------

### UX Example: Dynamic Upload Flow

Source: https://svelte.carbondesignsystem.com/components/ProgressBar

Demonstrates a complete upload simulation using Svelte's reactivity. It includes a ProgressBar that updates dynamically based on simulated progress, along with 'Start' and 'Reset' buttons to control the process. The status and helper text update accordingly.

```html
<script>
  import { ProgressBar, ButtonSet, Button } from "carbon-components-svelte";

  let max = 328;
  let value = 0;
  let status = "active";

  $: helperText = 
    value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
  $: if (value === max) {
    helperText = "Done";
    status = "finished";
  }
</script>

<ProgressBar labelText="Upload status" {value} {max} {helperText} {status} />

<ButtonSet style="margin-top: var(--cds-spacing-08)">
  <Button
    disabled={value > 0}
    on:click={() => {
      const interval = setInterval(() => {
        const delta = Math.random() * 10;

        if (value + delta < max) {
          value += delta;
        } else {
          value = max;
          clearInterval(interval);
        }
      }, 30);
    }}
  >
    Start
  </Button>
  <Button
    kind="tertiary"
    disabled={value !== max}
    on:click={() => {
      value = 0;
      status = "active";
    }}
  >
    Reset
  </Button>
</ButtonSet>

```

--------------------------------

### Default TooltipDefinition Example

Source: https://svelte.carbondesignsystem.com/components/TooltipDefinition

Demonstrates the basic usage of the TooltipDefinition component, displaying a tooltip with default bottom-center alignment. No external dependencies are required beyond the component itself.

```html
<script>
  import { TooltipDefinition } from "carbon-components-svelte";
</script>

<TooltipDefinition
  tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
>
  Armonk
</TooltipDefinition>
```

--------------------------------

### Svelte TextArea Skeleton

Source: https://svelte.carbondesignsystem.com/components/TextArea

Provides an example of displaying a loading state for the Svelte TextArea component using the `TextAreaSkeleton`.

```svelte
<script>
  import { TextAreaSkeleton } from "carbon-components-svelte";
</script>

<TextAreaSkeleton />

```

--------------------------------

### InlineLoading: UX Example

Source: https://svelte.carbondesignsystem.com/components/InlineLoading

An interactive example showcasing the InlineLoading component within a user experience flow, involving 'Submit' and 'Cancel' buttons to control the loading state. It utilizes Svelte's reactive declarations and lifecycle hooks.

```javascript
<script>
  import { Button, ButtonSet, InlineLoading } from "carbon-components-svelte";
  import { onDestroy } from "svelte";

  const descriptionMap = {
    active: "Submitting",
    finished: "Success",
    inactive: "Cancelling...",
  };

  const stateMap = {
    active: "finished",
    inactive: "dormant",
    finished: "dormant",
  };

  let timeout = undefined;
  let state = "dormant"; // "dormant" | "active" | "finished" | "inactive"

  function reset(incomingState) {
    if (typeof timeout === "number") {
      clearTimeout(timeout);
    }

    if (incomingState) {
      timeout = setTimeout(() => {
        state = incomingState;
      }, 2000);
    }
  }

  onDestroy(reset);

  $: reset(stateMap[state]);
</script>

<ButtonSet>
  <Button
    kind="ghost"
    disabled={state === "dormant" || state === "finished"}
    on:click={() => (state = "inactive")}
  >
    Cancel
  </Button>
  {#if state !== "dormant"}
    <InlineLoading status={state} description={descriptionMap[state]} />
  {:else}
    <Button on:click={() => (state = "active")}>Submit</Button>
  {/if}
</ButtonSet>

```

--------------------------------

### Light Variant Tile Example

Source: https://svelte.carbondesignsystem.com/components/Tile

Uses the light variant for light-themed backgrounds by setting the `light` prop to `true`.

```APIDOC
## Light Variant Tile

### Description

Use the light variant for light-themed backgrounds by setting `light` to `true`.

### Method

Not Applicable (Component Usage)

### Endpoint

Not Applicable (Component Usage)

### Request Example

```svelte
<script>
  import { Tile } from "carbon-components-svelte";
</script>

<Tile light>Content</Tile>
```

### Response

Not Applicable (Component Usage)
```

--------------------------------

### Reactive Toggle Example

Source: https://svelte.carbondesignsystem.com/components/Toggle

Demonstrates controlling the toggle state programmatically using two-way binding.

```APIDOC
## Reactive Toggle Example

### Description
Demonstrates controlling the toggle state programmatically using two-way binding with the `bind:toggled` directive.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Props
- **labelText** (string) - Required - The label text for the toggle.
- **bind:toggled** (boolean) - Two-way binding to control the toggle's state.

### Request Example
```svelte
<script>
  import { Toggle, Button } from "carbon-components-svelte";

  let toggled = true;
</script>

<Toggle labelText="Push notifications" bind:toggled />

<div>
  <Button size="small" on:click={() => (toggled = !toggled)}>
    Toggle
    {toggled ? "off" : "on"}
  </Button>
</div>

<div>Toggled: {toggled}</div>
```

### Response
N/A (Component Usage)

### Response Example
N/A (Component Usage)
```

--------------------------------

### TimePicker Default Example - Svelte

Source: https://svelte.carbondesignsystem.com/components/TimePicker

Demonstrates the default TimePicker component with AM/PM and timezone selectors. Requires `TimePicker`, `TimePickerSelect`, and `SelectItem` from `carbon-components-svelte`.

```html
<script>
  import {
    TimePicker,
    TimePickerSelect,
    SelectItem,
  } from "carbon-components-svelte";
</script>

<TimePicker labelText="Cron job" placeholder="hh:mm">
  <TimePickerSelect value="pm">
    <SelectItem value="am" text="AM" />
    <SelectItem value="pm" text="PM" />
  </TimePickerSelect>
  <TimePickerSelect value="pdt">
    <SelectItem value="pdt" text="PDT" />
    <SelectItem value="gmt" text="GMT" />
  </TimePickerSelect>
</TimePicker>
```

--------------------------------

### Skeleton Button State (Svelte)

Source: https://svelte.carbondesignsystem.com/components/Button

Demonstrates how to display a button in a loading state using the `skeleton` prop. Examples include various sizes: 'xl', 'lg', default, 'field', and 'small'.

```svelte
<script>
  import { Button } from "carbon-components-svelte";
</script>

<Button size="xl" skeleton />
<Button size="lg" skeleton />
<Button skeleton />
<Button skeleton size="field" />
<Button skeleton size="small" />

```

--------------------------------

### Reactive PaginationNav Example

Source: https://svelte.carbondesignsystem.com/components/PaginationNav

Demonstrates how to make the PaginationNav reactive by binding the 'page' prop to a variable. Includes a button to reset the page to 1 and displays the current page number.

```svelte
<script>
  import { PaginationNav, Button } from "carbon-components-svelte";

  let page = 2;
</script>

<PaginationNav bind:page />

<div style="margin: var(--cds-layout-01) 0">
  <Button on:click={() => (page = 1)} disabled={page === 0}>
    Set page to 1
  </Button>
</div>

<strong>page:</strong>
{page}

```

--------------------------------

### Svelte ToastNotification Examples

Source: https://svelte.carbondesignsystem.com/components/ToastNotification

Demonstrates the usage of the ToastNotification component in Svelte for different notification kinds including error, info, success, and warning. It utilizes the 'carbon-components-svelte' library.

```svelte
<script>
  import { ToastNotification } from "carbon-components-svelte";
</script>

<ToastNotification
  kind="error"
  title="Error"
  subtitle="An internal server error occurred."
  caption={new Date().toLocaleString()}/>
<ToastNotification
  kind="info"
  title="New updates"
  subtitle="Restart to get the latest updates."
  caption={new Date().toLocaleString()}/>
<ToastNotification
  kind="info-square"
  title="New updates"
  subtitle="Restart to get the latest updates."
  caption={new Date().toLocaleString()}/>
<ToastNotification
  kind="success"
  title="Success"
  subtitle="Your settings have been saved."
  caption={new Date().toLocaleString()}/>
<ToastNotification
  kind="warning"
  title="Scheduled maintenance"
  subtitle="Maintenance will last 2-4 hours."
  caption={new Date().toLocaleString()}/>
<ToastNotification
  kind="warning-alt"
  title="Scheduled maintenance"
  subtitle="Maintenance will last 2-4 hours."
  caption={new Date().toLocaleString()}/>

```

--------------------------------

### TooltipIcon Positioning with Direction and Align Props in Svelte

Source: https://svelte.carbondesignsystem.com/components/TooltipIcon

Shows how to control the tooltip's position using the `direction` and `align` props. Examples include 'top start', 'right end', 'bottom start', and 'left start' alignments.

```html
<script>
  import { TooltipIcon } from "carbon-components-svelte";
  import Filter from "carbon-icons-svelte/lib/Filter.svelte";
</script>

<TooltipIcon
  tooltipText="Top start"
  direction="top"
  align="start"
  icon={Filter}
/>
<TooltipIcon
  tooltipText="Right end"
  direction="right"
  align="end"
  icon={Filter}
/>
<TooltipIcon
  tooltipText="Bottom start"
  direction="bottom"
  align="start"
  icon={Filter}
/>
<TooltipIcon
  tooltipText="Left start"
  direction="left"
  align="start"
  icon={Filter}
/>

```

--------------------------------

### DataTable Skeleton with Headers and Row Count

Source: https://svelte.carbondesignsystem.com/components/DataTable

This example shows how to initialize the DataTableSkeleton with an array of header strings and a specified number of rows. It's useful for creating a placeholder structure for a data table.

```javascript
<script>
  import { DataTableSkeleton } from "carbon-components-svelte";
</script>

<DataTableSkeleton headers={["Name", "Protocol", "Port", "Rule"]} rows={10} />

```

--------------------------------

### TimePicker Small Size Example - Svelte

Source: https://svelte.carbondesignsystem.com/components/TimePicker

Demonstrates the TimePicker component with a small size (`size='sm'`) for more compact layouts. Features AM/PM and timezone selectors. Requires `TimePicker`, `TimePickerSelect`, and `SelectItem` from `carbon-components-svelte`.

```html
<script>
  import {
    TimePicker,
    TimePickerSelect,
    SelectItem,
  } from "carbon-components-svelte";
</script>

<TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
  <TimePickerSelect value="pm">
    <SelectItem value="am" text="AM" />
    <SelectItem value="pm" text="PM" />
  </TimePickerSelect>
  <TimePickerSelect value="pdt">
    <SelectItem value="pdt" text="PDT" />
    <SelectItem value="gmt" text="GMT" />
  </TimePickerSelect>
</TimePicker>
```

--------------------------------

### Create a Form with Grouped Controls

Source: https://svelte.carbondesignsystem.com/components/Form

Demonstrates how to create a form with checkboxes, radio buttons, and a select menu using the Form and FormGroup components. It includes examples of various input types and their configurations.

```html
<script>
  import {
    Form,
    FormGroup,
    Checkbox,
    RadioButtonGroup,
    RadioButton,
    Select,
    SelectItem,
    Button,
  } from "carbon-components-svelte";
</script>

<Form on:submit>
  <FormGroup legendText="Checkboxes">
    <Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
    <Checkbox id="checkbox-1" labelText="Checkbox Label" />
    <Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
  </FormGroup>
  <FormGroup legendText="Radio buttons">
    <RadioButtonGroup name="radio-button-group" selected="default-selected">
      <RadioButton
        id="radio-1"
        value="standard"
        labelText="Standard Radio Button"
      />
      <RadioButton
        id="radio-2"
        value="default-selected"
        labelText="Default Selected Radio Button"
      />
      <RadioButton
        id="radio-4"
        value="disabled"
        labelText="Disabled Radio Button"
        disabled
      />
    </RadioButtonGroup>
  </FormGroup>
  <FormGroup>
    <Select id="select-1" labelText="Select menu">
      <SelectItem
        disabled
        hidden
        value="placeholder-item"
        text="Choose an option"
      />
      <SelectItem value="option-1" text="Option 1" />
      <SelectItem value="option-2" text="Option 2" />
      <SelectItem value="option-3" text="Option 3" />
    </Select>
  </FormGroup>
  <Button type="submit">Submit</Button>
</Form>
```

--------------------------------

### TimePicker Light Variant Example - Svelte

Source: https://svelte.carbondesignsystem.com/components/TimePicker

Shows the TimePicker component with the `light` variant enabled for use on light-themed backgrounds. It includes AM/PM and timezone selectors. Requires `TimePicker`, `TimePickerSelect`, and `SelectItem` from `carbon-components-svelte`.

```html
<script>
  import {
    TimePicker,
    TimePickerSelect,
    SelectItem,
  } from "carbon-components-svelte";
</script>

<TimePicker light labelText="Cron job" placeholder="hh:mm">
  <TimePickerSelect value="pm">
    <SelectItem value="am" text="AM" />
    <SelectItem value="pm" text="PM" />
  </TimePickerSelect>
  <TimePickerSelect value="pdt">
    <SelectItem value="pdt" text="PDT" />
    <SelectItem value="gmt" text="GMT" />
  </TimePickerSelect>
</TimePicker>
```

--------------------------------

### SelectSkeleton

Source: https://svelte.carbondesignsystem.com/components/Select

Demonstrates the usage of the `SelectSkeleton` component for displaying a loading state.

```APIDOC
## Skeleton

Display a loading state using the skeleton variant.

### Endpoint

`/websites/svelte_carbondesignsystem_components`

### Description

Provides a placeholder UI element that mimics the structure of the `Select` component while data is being loaded.

### Usage Example

```svelte
<script>
  import { SelectSkeleton } from "carbon-components-svelte";
</script>

<SelectSkeleton />
```
```

--------------------------------

### Create a basic Link

Source: https://svelte.carbondesignsystem.com/components/Link

Demonstrates creating a basic hyperlink using the Link component with default styling. Requires importing the Link component from 'carbon-components-svelte'.

```html
<script>
  import { Link } from "carbon-components-svelte";
</script>

<Link href="https://www.carbondesignsystem.com/">Carbon Design System</Link>

```

--------------------------------

### Svelte MultiSelect: Disabled items example

Source: https://svelte.carbondesignsystem.com/components/MultiSelect

Illustrates how to disable specific items within the MultiSelect component. This is achieved by setting the `disabled` property to `true` for individual items in the `items` array. The 'Email' option is disabled in this example.

```html
<script>
  import { MultiSelect } from "carbon-components-svelte";
</script>

<MultiSelect
  titleText="Contact"
  label="Select contact methods..."
  items={[
    { id: "0", text: "Slack" },
    { id: "1", text: "Email", disabled: true },
    { id: "2", text: "Fax" },
  ]}
/>
```

--------------------------------

### Svelte TreeView: Compact Size Variant

Source: https://svelte.carbondesignsystem.com/components/TreeView

Illustrates the use of the compact size variant for the Svelte TreeView component by setting the `size` prop to 'compact'. This example utilizes the same hierarchical data structure and event handling as the initial active node example.

```html
<script>
  import { TreeView } from "carbon-components-svelte";

  let activeId = 0;
  let selectedIds = [];
  let nodes = [
    { id: 0, text: "AI / Machine learning" },
    {
      id: 1,
      text: "Analytics",
      nodes: [
        {
          id: 2,
          text: "IBM Analytics Engine",
          nodes: [
            { id: 3, text: "Apache Spark" },
            { id: 4, text: "Hadoop" },
          ],
        },
        { id: 5, text: "IBM Cloud SQL Query" },
        { id: 6, text: "IBM Db2 Warehouse on Cloud" },
      ],
    },
    {
      id: 7,
      text: "Blockchain",
      nodes: [{ id: 8, text: "IBM Blockchain Platform" }],
    },
    {
      id: 9,
      text: "Databases",
      nodes: [
        { id: 10, text: "IBM Cloud Databases for Elasticsearch" },
        { id: 11, text: "IBM Cloud Databases for Enterprise DB" },
        { id: 12, text: "IBM Cloud Databases for MongoDB" },
        { id: 13, text: "IBM Cloud Databases for PostgreSQL" },
      ],
    },
    {
      id: 14,
      text: "Integration",
      disabled: true,
      nodes: [{ id: 15, text: "IBM API Connect", disabled: true }],
    },
  ];
</script>

<TreeView
  size="compact"
  labelText="Cloud Products"
  {nodes}
  bind:activeId
  bind:selectedIds
  on:select={({ detail }) => console.log("select", detail)}
  on:toggle={({ detail }) => console.log("toggle", detail)}
  on:focus={({ detail }) => console.log("focus", detail)}
/>

<div>Active node id: {activeId}</div>
<div>Selected ids: {JSON.stringify(selectedIds)}</div>

<style>
  div {
    margin-top: var(--cds-spacing-05);
  }
</style>

```

--------------------------------

### Create a basic Popover

Source: https://svelte.carbondesignsystem.com/components/Popover

Demonstrates creating a basic Popover with absolute positioning using the `open` prop. It requires importing the `Popover` component from `carbon-components-svelte`.

```svelte
<script>
  import { Popover } from "carbon-components-svelte";
</script>

<div data-outline>
  Parent
  <Popover open>
    <div style="padding: var(--cds-spacing-05)">Content</div>
  </Popover>
</div>

```

--------------------------------

### AspectRatio with Ratio 1x2

Source: https://svelte.carbondesignsystem.com/components/AspectRatio

Example of using the AspectRatio component with a 1:2 aspect ratio.

```APIDOC
## AspectRatio with Ratio 1x2

### Description

Displays a container with a 1:2 aspect ratio.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Query Parameters

- **ratio** (string) - Required - Set to `"1x2"` to specify the aspect ratio.

### Request Example

```svelte
<script>
  import { AspectRatio } from "carbon-components-svelte";
</script>

<AspectRatio ratio="1x2">1x2</AspectRatio>
```

### Response

N/A (Component Usage)

### Response Example

N/A (Component Usage)
```

--------------------------------

### Svelte: Select with helper text

Source: https://svelte.carbondesignsystem.com/components/Select

Shows how to add descriptive helper text below the Svelte Select component using the `helperText` prop. This provides additional context or instructions to the user.

```svelte
<script>
  import { Select, SelectItem } from "carbon-components-svelte";
</script>

<Select
  helperText="Carbon offers 4 themes (2 light, 3 dark)"
  labelText="Carbon theme"
  selected="g10">
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
</Select>
```

--------------------------------

### AspectRatio with Ratio 9x16

Source: https://svelte.carbondesignsystem.com/components/AspectRatio

Example of using the AspectRatio component with a 9:16 aspect ratio.

```APIDOC
## AspectRatio with Ratio 9x16

### Description

Displays a container with a 9:16 aspect ratio.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Query Parameters

- **ratio** (string) - Required - Set to `"9x16"` to specify the aspect ratio.

### Request Example

```svelte
<script>
  import { AspectRatio } from "carbon-components-svelte";
</script>

<AspectRatio ratio="9x16">9x16</AspectRatio>
```

### Response

N/A (Component Usage)

### Response Example

N/A (Component Usage)
```

--------------------------------

### Select Component API

Source: https://svelte.carbondesignsystem.com/components/Select

API documentation for the SvelteUI Select component, detailing its properties and usage.

```APIDOC
## Select Component API

API documentation is auto-generated by sveld.

### Components

*   Select
*   SelectItem
*   SelectItemGroup
*   SelectSkeleton

### Source Code

`src/Select/Select.svelte`
```

--------------------------------

### AspectRatio with Ratio 3x2

Source: https://svelte.carbondesignsystem.com/components/AspectRatio

Example of using the AspectRatio component with a 3:2 aspect ratio.

```APIDOC
## AspectRatio with Ratio 3x2

### Description

Displays a container with a 3:2 aspect ratio.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Query Parameters

- **ratio** (string) - Required - Set to `"3x2"` to specify the aspect ratio.

### Request Example

```svelte
<script>
  import { AspectRatio } from "carbon-components-svelte";
</script>

<AspectRatio ratio="3x2">3x2</AspectRatio>
```

### Response

N/A (Component Usage)

### Response Example

N/A (Component Usage)
```

--------------------------------

### Create ContentSwitcher with Switch components (Svelte)

Source: https://svelte.carbondesignsystem.com/components/ContentSwitcher

Demonstrates the basic usage of the ContentSwitcher and Switch components to create a content switcher with labeled options. Each switch requires a `text` prop.

```svelte
<script>
  import { ContentSwitcher, Switch } from "carbon-components-svelte";
</script>

<ContentSwitcher>
  <Switch text="Latest news" />
  <Switch text="Trending" />
</ContentSwitcher>
```

--------------------------------

### AspectRatio with Ratio 3x4

Source: https://svelte.carbondesignsystem.com/components/AspectRatio

Example of using the AspectRatio component with a 3:4 aspect ratio.

```APIDOC
## AspectRatio with Ratio 3x4

### Description

Displays a container with a 3:4 aspect ratio.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Query Parameters

- **ratio** (string) - Required - Set to `"3x4"` to specify the aspect ratio.

### Request Example

```svelte
<script>
  import { AspectRatio } from "carbon-components-svelte";
</script>

<AspectRatio ratio="3x4">3x4</AspectRatio>
```

### Response

N/A (Component Usage)

### Response Example

N/A (Component Usage)
```

--------------------------------

### NumberInput - Basic Usage

Source: https://svelte.carbondesignsystem.com/components/NumberInput

Demonstrates the basic usage of the NumberInput component with a label and initial value.

```APIDOC
## NumberInput - Basic Usage

### Description
A simple NumberInput component with a label and an initial value.

### Method
N/A (Component Usage)

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```svelte
<script>
  import { NumberInput } from "carbon-components-svelte";
</script>

<NumberInput label="Clusters" value={0} />
```

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A
```

--------------------------------

### AspectRatio with Ratio 1x1

Source: https://svelte.carbondesignsystem.com/components/AspectRatio

Example of using the AspectRatio component with a 1:1 aspect ratio.

```APIDOC
## AspectRatio with Ratio 1x1

### Description

Displays a container with a 1:1 aspect ratio.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Query Parameters

- **ratio** (string) - Required - Set to `"1x1"` to specify the aspect ratio.

### Request Example

```svelte
<script>
  import { AspectRatio } from "carbon-components-svelte";
</script>

<AspectRatio ratio="1x1">1x1</AspectRatio>
```

### Response

N/A (Component Usage)

### Response Example

N/A (Component Usage)
```

--------------------------------

### Basic SkeletonPlaceholder

Source: https://svelte.carbondesignsystem.com/components/SkeletonPlaceholder

Creates a default SkeletonPlaceholder component. This is the most basic implementation, showing a standard placeholder for loading content.

```javascript
<script>
  import { SkeletonPlaceholder } from "carbon-components-svelte";
</script>

<SkeletonPlaceholder />

```

--------------------------------

### AspectRatio with Ratio 4x3

Source: https://svelte.carbondesignsystem.com/components/AspectRatio

Example of using the AspectRatio component with a 4:3 aspect ratio.

```APIDOC
## AspectRatio with Ratio 4x3

### Description

Displays a container with a 4:3 aspect ratio.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Query Parameters

- **ratio** (string) - Required - Set to `"4x3"` to specify the aspect ratio.

### Request Example

```svelte
<script>
  import { AspectRatio } from "carbon-components-svelte";
</script>

<AspectRatio ratio="4x3">4x3</AspectRatio>
```

### Response

N/A (Component Usage)

### Response Example

N/A (Component Usage)
```

--------------------------------

### AspectRatio with Ratio 16x9

Source: https://svelte.carbondesignsystem.com/components/AspectRatio

Example of using the AspectRatio component with a 16:9 aspect ratio.

```APIDOC
## AspectRatio with Ratio 16x9

### Description

Displays a container with a 16:9 aspect ratio.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Query Parameters

- **ratio** (string) - Required - Set to `"16x9"` to specify the aspect ratio.

### Request Example

```svelte
<script>
  import { AspectRatio } from "carbon-components-svelte";
</script>

<AspectRatio ratio="16x9">16x9</AspectRatio>
```

### Response

N/A (Component Usage)

### Response Example

N/A (Component Usage)
```

--------------------------------

### Svelte Loading Component: Default Usage

Source: https://svelte.carbondesignsystem.com/components/Loading

Demonstrates the basic implementation of the Svelte Loading component, which displays a full-screen loading indicator with a semi-transparent overlay.

```svelte
<script>
  import { Loading } from "carbon-components-svelte";
</script>

<Loading />

```

--------------------------------

### AspectRatio with Ratio 2x3

Source: https://svelte.carbondesignsystem.com/components/AspectRatio

Example of using the AspectRatio component with a 2:3 aspect ratio.

```APIDOC
## AspectRatio with Ratio 2x3

### Description

Displays a container with a 2:3 aspect ratio.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Query Parameters

- **ratio** (string) - Required - Set to `"2x3"` to specify the aspect ratio.

### Request Example

```svelte
<script>
  import { AspectRatio } from "carbon-components-svelte";
</script>

<AspectRatio ratio="2x3">2x3</AspectRatio>
```

### Response

N/A (Component Usage)

### Response Example

N/A (Component Usage)
```

--------------------------------

### NumberInputSkeleton - Basic

Source: https://svelte.carbondesignsystem.com/components/NumberInput

Illustrates the use of the NumberInputSkeleton component to display a loading state.

```APIDOC
## NumberInputSkeleton - Basic

### Description
Displays a skeleton state for the NumberInput component, indicating that data is being loaded. This is useful for improving perceived performance while waiting for data.

### Method
N/A (Component Usage)

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```svelte
<script>
  import { NumberInputSkeleton } from "carbon-components-svelte";
</script>

<NumberInputSkeleton />
```

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A
```

--------------------------------

### Svelte Loading Component: Small Size

Source: https://svelte.carbondesignsystem.com/components/Loading

Illustrates the usage of the Svelte Loading component in a smaller, more compact size, suitable for inline or less prominent loading indications.

```svelte
<script>
  import { Loading } from "carbon-components-svelte";
</script>

<Loading withOverlay={false} small />

```

--------------------------------

### Create a Basic Svelte Tile

Source: https://svelte.carbondesignsystem.com/components/Tile

Demonstrates the basic usage of the Svelte Tile component to create a standard container for content. This is the fundamental building block for structured content sections.

```html
<script>
  import { Tile } from "carbon-components-svelte";
</script>

<Tile>Content</Tile>

```

--------------------------------

### Default AspectRatio (2:1)

Source: https://svelte.carbondesignsystem.com/components/AspectRatio

Example of using the AspectRatio component with the default 2:1 aspect ratio.

```APIDOC
## Default AspectRatio (2:1)

### Description

Displays a container with a 2:1 aspect ratio by default.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Request Example

```svelte
<script>
  import { AspectRatio } from "carbon-components-svelte";
</script>

<AspectRatio>2x1</AspectRatio>
```

### Response

N/A (Component Usage)

### Response Example

N/A (Component Usage)
```

--------------------------------

### Create a basic fluid-width form layout with FluidForm

Source: https://svelte.carbondesignsystem.com/components/FluidForm

Demonstrates the basic implementation of the FluidForm component, showcasing a simple login form with username and password input fields. Requires importing `FluidForm`, `TextInput`, and `PasswordInput` from `carbon-components-svelte`.

```html
<script>
  import {
    FluidForm,
    TextInput,
    PasswordInput,
  } from "carbon-components-svelte";
</script>

<FluidForm>
  <TextInput labelText="User name" placeholder="Enter user name..." required />
  <PasswordInput
    required
    type="password"
    labelText="Password"
    placeholder="Enter password..."
  />
</FluidForm>
```

--------------------------------

### AspectRatio with Tile (16x9)

Source: https://svelte.carbondesignsystem.com/components/AspectRatio

Example of nesting a Tile component within an AspectRatio component with a 16:9 aspect ratio.

```APIDOC
## AspectRatio with Tile (16x9)

### Description

Demonstrates nesting a `Tile` component within an `AspectRatio` component configured for a 16:9 aspect ratio.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Request Example

```svelte
<script>
  import { AspectRatio, Tile } from "carbon-components-svelte";
</script>

<AspectRatio ratio="16x9">
  <Tile style="height: 100%">Content</Tile>
</AspectRatio>
```

### Response

N/A (Component Usage)

### Response Example

N/A (Component Usage)
```

--------------------------------

### ContextMenu with Multiple Targets

Source: https://svelte.carbondesignsystem.com/components/ContextMenu

Demonstrates how to use the ContextMenu component with multiple target elements, allowing the context menu to be triggered from various sources.

```APIDOC
## Multiple targets

Set `target` to an array of elements to trigger the context menu from multiple sources.

```svelte
<script>
  import {
    ContextMenu,
    ContextMenuDivider,
    ContextMenuGroup,
    ContextMenuOption,
  } from "carbon-components-svelte";
  import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
  import Cut from "carbon-icons-svelte/lib/Cut.svelte";

  let target;
  let target2;
</script>

<ContextMenu target={[target, target2]} on:open={(e) => console.log(e.detail)}>
  <ContextMenuOption
    indented
    labelText="Copy"
    shortcutText="⌘C"
    icon={CopyFile}
  />
  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon={Cut} />
  <ContextMenuDivider />
  <ContextMenuOption indented labelText="Export as">
    <ContextMenuGroup labelText="Export options">
      <ContextMenuOption id="pdf" labelText="PDF" />
      <ContextMenuOption id="txt" labelText="TXT" />
      <ContextMenuOption id="mp3" labelText="MP3" />
    </ContextMenuGroup>
  </ContextMenuOption>
  <ContextMenuDivider />
  <ContextMenuOption selectable labelText="Remove metadata" />
  <ContextMenuDivider />
  <ContextMenuGroup labelText="Style options">
    <ContextMenuOption id="0" labelText="Font smoothing" selected />
    <ContextMenuOption id="1" labelText="Reduce noise" />
    <ContextMenuOption id="2" labelText="Auto-sharpen" />
  </ContextMenuGroup>
  <ContextMenuDivider />
  <ContextMenuOption indented kind="danger" labelText="Delete" />
</ContextMenu>

<div>
  <p bind:this={target}>Right click this element</p>
  <p bind:this={target2}>... or this one</p>
</div>

<style>
  div {
    position: absolute;
    width: calc(100% - var(--cds-spacing-05));
    height: calc(100% - var(--cds-spacing-06));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cds-text-02);
  }

  p {
    outline: 1px solid var(--cds-interactive-01);
  }
</style>
```
```

--------------------------------

### Create Basic TextArea in Svelte

Source: https://svelte.carbondesignsystem.com/components/TextArea

Demonstrates how to create a basic Svelte TextArea component with a label and placeholder text using the `TextArea` component from `carbon-components-svelte`.

```svelte
<script>
  import { TextArea } from "carbon-components-svelte";
</script>

<TextArea labelText="App description" placeholder="Enter a description..." />

```

--------------------------------

### Breakpoint Utility - Store Usage

Source: https://svelte.carbondesignsystem.com/components/Breakpoint

Illustrates using the `breakpointObserver` store and related functions to get breakpoint information and derived boolean values.

```APIDOC
## Breakpoint Utility - Store Usage

### Description
This example demonstrates using the `breakpointObserver` store to access the current breakpoint size and derived stores for checking if the size is smaller or larger than a given breakpoint.

### Method
N/A (Utility Usage)

### Endpoint
N/A (Utility Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<script>
  import { breakpointObserver, breakpoints } from "carbon-components-svelte";

  const size = breakpointObserver();
  const smaller = size.smallerThan("md");
  const larger = size.largerThan("md");
</script>

<p>Current breakpoint size: {$size}</p>
<p>Current breakpoint value: {breakpoints[$size]}px</p>
<p>Smaller than medium: {$smaller}</p>
<p>Larger than medium: {$larger}</p>
```

### Response
#### Success Response (200)
N/A (Utility provides Svelte stores)

#### Response Example
N/A
```

--------------------------------

### Create Basic Header with UIShell Components

Source: https://svelte.carbondesignsystem.com/components/UIShell

Demonstrates how to create a basic application header using the Header, HeaderNav, and Content components from carbon-components-svelte. This snippet shows the structure for adding navigation links and submenus within the header.

```javascript
<script>
  import {
    Header,
    HeaderNav,
    HeaderNavItem,
    HeaderNavMenu,
    SkipToContent,
    Content,
    Grid,
    Row,
    Column,
  } from "carbon-components-svelte";

  let isSideNavOpen = false;
</script>

<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
  <svelte:fragment slot="skip-to-content">
    <SkipToContent />
  </svelte:fragment>
  <HeaderNav>
    <HeaderNavItem href="/" text="Link 1" />
    <HeaderNavItem href="/" text="Link 2" />
    <HeaderNavItem href="/" text="Link 3" />
    <HeaderNavMenu text="Menu">
      <HeaderNavItem href="/" text="Link 1" />
      <HeaderNavItem href="/" text="Link 2" />
      <HeaderNavItem href="/" text="Link 3" />
    </HeaderNavMenu>
  </HeaderNav>
</Header>

<Content>
  <Grid>
    <Row>
      <Column>
        <h1>Welcome</h1>
      </Column>
    </Row>
  </Grid>
</Content>

```
Tokens:
Raw