Input

Wrapper for a HTML input field.

Text

This is a field description.

For multiline text, use Textarea instead of type="textarea".

Example

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

<Panel heading="Inställningar">
  <Input name="text" label="Text" description="This is a field description." />
</Panel>

Props

Prop	Type	Description
`label` required	`string \| Snippet`	Field label, a string or Svelte snippet.
`value` $bindable	`string \| number`	Field value.
`description`	`string \| Snippet`	Description shown below the field, a string or Svelte snippet.
`type`	`InputType`	HTML input type, such as `'text'`, `'url'`, `'email'`, or `'number'`. Default: `'text'`
`name`	`string`	Configuration key and HTML name attribute.
`required`	`boolean`	Marks the field as required unless disabled or read-only. Default: `false`
`disabled`	`boolean`	Disables the field. Default: `false`
`readonly`	`boolean`	Prevents editing while keeping the field focusable. Default: `false`
`show`	`boolean`	Shows or hides the field without destroying it. Default: `true`
`class`	`string`	CSS class added to the form-group wrapper. Default: `''`
`onInput`	`function` `(value: string \| number, event: Event) => void`	Called on the native input event with the updated value.
`onChange`	`function` `(value: string \| number, event: Event) => void`	Called on the native change event with the updated value.
`validate`	`function` `(context: ValidationContext<string \| number>) => ValidationResult`	Custom validation function.

Additional HTML input attributes, such as placeholder, maxlength, pattern, min, max, and step, are forwarded to the input element.

For type="number" and type="range", input and change events convert the value to a number. Clearing a number input produces 0.

URL prefixing

When setting the type to "url", the input will automatically prefix https:// if the user does not provide it.

<Input name="url" label="Webbadress" type="url" />

Validation

By default, the field applies required-field and native browser validation, including constraints such as type, pattern, min, and max. A custom validate prop replaces the default and returns { success: boolean, message?: string }.

Validation errors are displayed below the input and prevent saving. See validation for more details.

Snippets

label and description accept text or Svelte snippets.
Default child content is rendered after the input and validation message.

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

<Input name="text">
  {#snippet label()}
    Ange <strong>text</strong>
  {/snippet}
  {#snippet description()}
    Text som används i <strong>appen</strong>.
  {/snippet}
  <p>Ytterligare information.</p>
</Input>

Default value

Use value to set a default when no saved configuration value is available:

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

Textarea for multiline text.