Docs
Input
Input
Displays a form input field or a component that looks like an input field.
Loading...
<script lang="ts">
import { Input } from "$lib/components/ui/input";
</script>
<Input type="email" placeholder="email" class="max-w-xs" />
<script lang="ts">
import { Input } from "$lib/components/ui/input";
</script>
<Input type="email" placeholder="email" class="max-w-xs" />
Installation
npx shadcn-svelte@latest add input
Usage
<script lang="ts">
import { Input } from "$lib/components/ui/input";
</script>
<Input />
Examples
Default
Loading...
<script lang="ts">
import { Input } from "$lib/components/ui/input";
</script>
<Input type="email" placeholder="email" class="max-w-xs" />
<script lang="ts">
import { Input } from "$lib/components/ui/input";
</script>
<Input type="email" placeholder="email" class="max-w-xs" />
Disabled
Loading...
<script lang="ts">
import { Input } from "$lib/components/ui/input";
</script>
<Input disabled type="email" placeholder="email" class="max-w-xs" />
<script lang="ts">
import { Input } from "$lib/components/ui/input";
</script>
<Input disabled type="email" placeholder="email" class="max-w-sm" />
With Label
Loading...
<script lang="ts">
import { Input } from "$lib/components/ui/input";
import { Label } from "$lib/components/ui/label";
</script>
<div class="grid w-full max-w-sm items-center gap-1.5">
<Label for="email">Email</Label>
<Input type="email" id="email" placeholder="email" />
</div>
<script lang="ts">
import { Input } from "$lib/components/ui/input";
import { Label } from "$lib/components/ui/label";
</script>
<div class="flex flex-col w-full max-w-sm gap-1.5">
<Label for="email">Email</Label>
<Input type="email" id="email" placeholder="email" />
</div>
With Text
Loading...
<script lang="ts">
import { Input } from "$lib/components/ui/input";
import { Label } from "$lib/components/ui/label";
</script>
<div class="grid w-full max-w-sm items-center gap-1.5">
<Label for="email-2">Email</Label>
<Input type="email" id="email-2" placeholder="Email" />
<p class="text-sm text-muted-foreground">Enter your email address.</p>
</div>
<script lang="ts">
import { Input } from "$lib/components/ui/input";
import { Label } from "$lib/components/ui/label";
</script>
<div class="flex flex-col w-full max-w-sm gap-1.5">
<Label for="email-2">Email</Label>
<Input type="email" id="email-2" placeholder="Email" />
<p class="text-sm text-muted-foreground">Enter your email address.</p>
</div>
With Button
Loading...
<script lang="ts">
import { Button } from "$lib/components/ui/button";
import { Input } from "$lib/components/ui/input";
</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>
<script lang="ts">
import { Button } from "$lib/components/ui/button";
import { Input } from "$lib/components/ui/input";
</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>
File
Loading...
<script lang="ts">
import { Input } from "$lib/components/ui/input";
import { Label } from "$lib/components/ui/label";
</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>
<script lang="ts">
import { Input } from "$lib/components/ui/input";
import { Label } from "$lib/components/ui/label";
</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
When using the input within a form, you'll want to use the <Form.Input /> component instead. This is a wrapper around your existing <Input /> component with some additional functionality for forms.
Loading...
<script lang="ts" context="module">
import { z } from "zod";
export const formSchema = z.object({
username: z.string().min(2).max(50)
});
export type FormSchema = typeof formSchema;
</script>
<script lang="ts">
import * as Form from "$lib/components/ui/form";
import type { SuperValidated } from "sveltekit-superforms";
import type { FormOptions } from "formsnap";
import { toast } from "svelte-sonner";
export let form: SuperValidated<FormSchema>;
const options: FormOptions<FormSchema> = {
onSubmit() {
toast.info("Submitting...");
},
onResult({ result }) {
console.log(result);
if (result.status === 200) toast.success("Success!");
if (result.status === 400) toast.error("Error!");
}
};
</script>
<Form.Root
schema={formSchema}
{form}
{options}
let:config
method="POST"
action="?/username"
class="w-2/3 space-y-6"
>
<Form.Field {config} name="username">
<Form.Item>
<Form.Label>Username</Form.Label>
<Form.Input />
<Form.Description>This is your public display name.</Form.Description>
<Form.Validation />
</Form.Item>
</Form.Field>
<Form.Button>Submit</Form.Button>
</Form.Root>
<script lang="ts" context="module">
import { z } from "zod";
export const formSchema = z.object({
username: z.string().min(2).max(50)
});
export type FormSchema = typeof formSchema;
</script>
<script lang="ts">
import * as Form from "$lib/components/ui/form";
import type { SuperValidated } from "sveltekit-superforms";
import type { FormOptions } from "formsnap";
import { toast } from "svelte-sonner";
export let form: SuperValidated<FormSchema>;
const options: FormOptions<FormSchema> = {
onSubmit() {
toast.info("Submitting...");
},
onResult({ result }) {
console.log(result);
if (result.status === 200) toast.success("Success!");
if (result.status === 400) toast.error("Error!");
}
};
</script>
<Form.Root
schema={formSchema}
{form}
{options}
let:config
method="POST"
action="?/username"
class="w-2/3 space-y-6"
>
<Form.Field {config} name="username">
<Form.Item>
<Form.Label>Username</Form.Label>
<Form.Input />
<Form.Description>This is your public display name.</Form.Description>
<Form.Validation />
</Form.Item>
</Form.Field>
<Form.Button>Submit</Form.Button>
</Form.Root>
On This Page