Input (text, number, email, password)

Example Usage

Text Input

Entered Text: Change this text

<script>
  import { Input } from "@fanny-pack-ui/svelte-kit";

  let textValue = "Change this text";
</script>

<div style="margin-bottom:20px">
  <Input
    type="text"
    bind:value={textValue}
    label="Enter some text"
    padding="var(--input-default-padding)"
    fontSize="var(--input-default-font-size)"
    textColor="var(--text-color-default)"
    placeholder="Type right here"
    disabled={false}
  />
</div>

Number Input

Entered Number: 1

<script>
  import { Input } from "@fanny-pack-ui/svelte-kit";

  let number = 1;
</script>

<div style="margin-bottom:20px">
  <Input
    type="number"
    bind:value={numberValue}
    label="Enter a number"
    placeholder="Type right here"
    disabled={false}
    min="0"
    max="10"
    step="0.5"
  />
</div>

Email Input

Entered Email:

<script>
  import { Input } from "@fanny-pack-ui/svelte-kit";

  let email = "";
</script>

<div style="margin-bottom:20px">
  <Input
    type="email"
    bind:value={email}
    label="Enter an email address"
    placeholder="Type email here"
    disabled={false}
  />
</div>

Password Input

Entered Password:

<script>
  import { Input } from "@fanny-pack-ui/svelte-kit";

  let password = "";
</script>

<div style="margin-bottom:20px">
  <Input
    type="password"
    bind:value={password}
    label="Enter a password"
    placeholder="Type password here"
    disabled={false}
  />
</div>

<datalist>

A <datalist> allows you to specify a list of predefined options for an <input> element, but users can also enter their own data into the <input> element. As a user types inside an <input> element that has a <datalist> element bound to it, the list of predefined options will get filtered based on the user’s input.

NOTE: In order to bind a <datalist> element to an <input> element, the <datalist> element’s id attribute should match the <input> element’s list attribute.

<script lang="ts">
  let browsers = [
    "Chrome",
    "Edge",
    "Firefox",
    "Opera",
    "Safari",
  ];
  let browser;
</script>

<div style="margin-bottom:20px">
  <Input
    type="text"
    bind:value={browser}
    label="Select a browser or enter your own"
    list="browsers"
    placeholder="Enter a browser name"
  />
  <datalist id="browsers">
    {#each browsers as browser}
      <option value={browser}>
    {/each}
  </datalist>
</div>

<script lang="ts">
  let numbers = [1, 2, 3, 4, 5];
  let number;
</script>

<div style="margin-bottom:20px">
  <Input
    type="number"
    bind:value={number}
    label="Select a number or enter your own"
    list="numbers"
    placeholder="Enter a number"
  />
  <datalist id="numbers">
    {#each numbers as number}
      <option value={number}>
    {/each}
  </datalist>
</div>

Custom Input Style Props

The original intention for these custom styles was to set --custom-input-bg-color="transparent" so the <Input> field would blend into the background. A few extra custom style rules have been provided for even more customizability.

You can set the following custom variables:

• --custom-input-bg-color
• --custom-input-border-color
• --custom-input-text-color
• --custom-input-placeholder-text-color

<div style="margin-bottom:20px">
  <Input
    type="text"
    bind:value={textValue}
    placeholder="Enter something"
    --custom-input-bg-color="pink"
    --custom-input-border-color="darkred"
    --custom-input-text-color="darkred"
    --custom-input-placeholder-text-color="gray"
  />
</div>

Props

Event Forwarding