TextList

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

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:

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

Example

<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.

<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.

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

Label

Slot for content in the label element.

Svelte 5

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

Svelte 4

<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

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

Svelte 4

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