InputField

Wrapper for input fields.
Automatically prefixes https:// if field type is url.

Props

Prop	Type	Description
id	string	Input ID, generated if no property is provided, needed for input label. Default: generateId()
label	string	Field label. Default: undefined
description	string	Description for the input field, displayed below the input field. Default: undefined
type	string	HTML input field types, e.g., text, textarea, url. Default: 'text'
name	string	Name attribute. Default: undefined
required	boolean	If the field is required. Default: false
disabled	boolean	If the field is disabled. Default: false
readonly	boolean	If the field is readonly. Default: false
show	boolean	Show and hide the component without re-rendering. Default: true
maxlength	number	Max length of input. Default: undefined
pattern	string	Validation pattern. Default: undefined
rows	number	Number of rows if textarea. Default: 3
value	string	Used if bound to value. Default: ''

Example

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

<Panel heading="Inställningar">
  <InputField name="text" label="Text" />
</Panel>

Advanced

NOT RECOMENDED

Usually the usage of name is enough for 99% of use cases.

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

  let { values } = $props();

  values = {
    text: '',
    ...values
  };

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

<Panel heading="Inställningar">
  <InputField bind:value={values.text} label="Text" />
</Panel>

Slots

Default

Default slot after input field.

<InputField name="text" label="Text">
  <p class="help-block">Some helpful text</p>
</InputField>

Label

Slot for content in the label element.

Svelte 5

<InputField name="text">
  {#snippet label()}
    Custom <strong>label</strong>
  {/snippet}
</InputField>

Svelte 4

<InputField name="text">
  <svelte:fragment slot="label">
    Custom <strong>label</strong>
  </svelte:fragment>
</InputField>

Description

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

Svelte 5

<InputField name="text">
  {#snippet description()}
    Custom <strong>description</strong>
  {/snippet}
</InputField>

Svelte 4

<InputField name="text">
  <svelte:fragment slot="description">
    Custom <strong>description</strong>
  </svelte:fragment>
</InputField>

Default value

Use the value attribute to set a default value:

<InputField  name="text" label="Text" value="Default text" />