Input

Displays a form input field or a component that looks like an input field.

Installation

pnpm dlx shadcn-svelte@latest add input

npx shadcn-svelte@latest add input

bun x shadcn-svelte@latest add input

npx shadcn-svelte@latest add input

Usage

<script lang="ts">
  import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Input />

Examples

Default

Disabled

With Label

<script lang="ts">
  import { Input } from "$lib/components/ui/input/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
 
  const id = $props.id();
</script>
 
<div class="flex w-full max-w-sm flex-col gap-1.5">
  <Label for="email-{id}">Email</Label>
  <Input type="email" id="email-{id}" placeholder="email" />
</div>

With Text

Enter your email address.

<script lang="ts">
  import { Input } from "$lib/components/ui/input/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
</script>
 
<div class="flex w-full max-w-sm flex-col gap-1.5">
  <Label for="email-2">Email</Label>
  <Input type="email" id="email-2" placeholder="Email" />
  <p class="text-muted-foreground text-sm">Enter your email address.</p>
</div>

With Button

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<form class="flex w-full max-w-sm items-center space-x-2">
  <Input type="email" placeholder="email" />
  <Button type="submit">Subscribe</Button>
</form>

Invalid

<script lang="ts">
  import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Input
  aria-invalid
  type="email"
  placeholder="email"
  value="shadcn@example"
  class="max-w-sm"
/>

File

Picture

<script lang="ts">
  import { Input } from "$lib/components/ui/input/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
</script>
 
<div class="grid w-full max-w-sm items-center gap-1.5">
  <Label for="picture">Picture</Label>
  <Input id="picture" type="file" />
</div>

Form

<script lang="ts" module>
  import { z } from "zod/v4";
 
  const formSchema = z.object({
    username: z.string().min(2).max(50)
  });
</script>
 
<script lang="ts">
  import { defaults, superForm } from "sveltekit-superforms";
  import { zod4 } from "sveltekit-superforms/adapters";
  import { toast } from "svelte-sonner";
  import * as Form from "$lib/components/ui/form/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
 
  const form = superForm(defaults(zod4(formSchema)), {
    validators: zod4(formSchema),
    SPA: true,
    onUpdate: ({ form: f }) => {
      if (f.valid) {
        toast.success(`You submitted ${JSON.stringify(f.data, null, 2)}`);
      } else {
        toast.error("Please fix the errors in the form.");
      }
    }
  });
 
  const { form: formData, enhance } = form;
</script>
 
<form method="POST" class="w-2/3 space-y-6" use:enhance>
  <Form.Field {form} name="username">
    <Form.Control>
      {#snippet children({ props })}
        <Form.Label>Username</Form.Label>
        <Input {...props} bind:value={$formData.username} />
      {/snippet}
    </Form.Control>
    <Form.Description>This is your public display name.</Form.Description>
    <Form.FieldErrors />
  </Form.Field>
  <Form.Button>Submit</Form.Button>
</form>

Input OTP Label