InputField

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

• Props
• Example
  • Standard
  • Advanced
• Slots
• Default value

Props

// Input ID, generated if no property is provided, needed for input label.
export let id = generateId();
// Field label, required.
export let label;
// HTML input field types, text, textarea, url and so on.
export let type = 'text';
// Name attribute.
export let name = undefined;
// If field is required.
export let required = false;
// If field is disabled.
export let disabled = false;
// If field is readonly.
export let readonly = false;
// Show and hide compoment without re-rendering.
export let show = true;
// Max length of input.
export let maxlength = undefined;
// Validation pattern.
export let pattern = undefined;
// Number of rows if textarea.
export let rows = 3;
// Used if bound to value.
export let value = '';

Example

Standard

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

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

Advanced

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

  const values = {
    text: '',
    ...window.CONFIG_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.

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

Default value

Use the value attribute to set a default value:

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