# TextList

Custom list component for adding multiple text values and sorting them.

![TextList](/_astro/TextList.BTHA9kGq_1XrnyL.webp)

## Props

| Prop          | Type            | Description                                                          |
| ------------- | --------------- | -------------------------------------------------------------------- |
| `id`          | `string`        | Unique identifier for the component. **Default:** `generateId()`     |
| `label`       | `string`        | Label for the text list.                                             |
| `description` | `string`        | Description text displayed below the input field.                    |
| `required`    | `boolean`       | If the field is required. **Default:** `false`                       |
| `name`        | `string`        | Name attribute for the text list. **Default:** `undefined`           |
| `disabled`    | `boolean`       | If the field is disabled. **Default:** `false`                       |
| `show`        | `boolean`       | Show or hide the component without re-rendering. **Default:** `true` |
| `value`       | `Array<string>` | Bound value for the text list. **Default:** `[]`                     |

## Default value

Use the value attribute to set a default value:

```svelte
<TextList
  name="textList"
  label="Text List"
  value={['Text 1']}
/>
```

## Example

```svelte
<script>
  import { Panel, TextList } from '@soleil-se/config-svelte';
</script>


<Panel heading="Inställningar">
  <TextList name="textList" label="Text List" />
</Panel>
```

Advanced**

> **NOT RECOMENDED**
>
> Usually the usage of `name` is enough for 99% of use cases.

```svelte
<script>
  import { Panel, TextList } from '@soleil-se/config-svelte';
  import { onSave } from '@soleil-se/config-svelte/utils';


  const values = {
    textList: '',
    ...window.CONFIG_VALUES
  };


  onSave(() => values);
</script>


<Panel heading="Inställningar">
  <TextList bind:value={values.textList} label="Text List" />
</Panel>
```

## Slots

### Default

Default slot after text list.

```svelte
<TextList name="textList" label="Text List">
  <p>Some text</p>
</TextList>
```

### Label

Slot for content in the label element.

* Svelte 5

  ```svelte
  <TextList name="textList">
    {#snippet label()}
      Custom <strong>label</strong>
    {/snippet}
  </TextList>
  ```

* Svelte 4

  ```svelte
  <TextList name="textList">
    <svelte:fragment slot="label">
      Custom <strong>label</strong>
    </svelte:fragment>
  </TextList>
  ```

### Description

Slot for content in the description element to be used instead of the prop when HTML formatting is needed.

* Svelte 5

  ```svelte
  <TextList name="textList">
    {#snippet description()}
      Custom <strong>description</strong>
    {/snippet}
  </TextList>
  ```

* Svelte 4

  ```svelte
  <TextList name="textList">
    <svelte:fragment slot="description">
      Custom <strong>description</strong>
    </svelte:fragment>
  </TextList>
  ```