Input

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

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

<Input type="email" placeholder="Email" class="max-w-xs" />

Installation


npx shadcn-svelte@latest add https://shadcn-svelte-registry-template.vercel.app/r/input.json

Usage

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

<Input />

Examples

Default

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

<Input type="email" placeholder="Email" class="max-w-xs" />

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>

Disabled

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

<Input disabled type="email" placeholder="Email" class="max-w-sm" />

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 Button

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

<div class="flex w-full max-w-sm items-center gap-2">
  <Input type="email" placeholder="Email" />
  <Button type="submit" variant="outline">Subscribe</Button>
</div>