Input

A text input component for forms and user data entry with built-in styling and accessibility features.

Epicenter

Local-first, open source apps

Special Sponsor

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Field.Field>
	<Field.Label for="input-demo-api-key">API Key</Field.Label>
	<Input id="input-demo-api-key" type="password" placeholder="sk-..." />
	<Field.Description>Your API key is encrypted and stored securely.</Field.Description>
</Field.Field>

Installation

pnpm dlx shadcn-svelte@latest add input

npx shadcn-svelte@latest add input

npx shadcn-svelte@latest add input

bun x shadcn-svelte@latest add input

Copy and paste the following code into your project.

import Root from "./input.svelte";

export {
  Root,
  //
  Root as Input,
};

Usage

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

<Input />

Basic

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

Field

Use Field.Field, Field.Label, and Field.Description to create an input with a label and description.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Field.Field>
	<Field.Label for="input-field-username">Username</Field.Label>
	<Input id="input-field-username" type="text" placeholder="Enter your username" />
	<Field.Description>Choose a unique username for your account.</Field.Description>
</Field.Field>

Field Group

Use Field.Group to show multiple Field.Field blocks and to build forms.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Button } from "$lib/components/ui/button/index.js";
	import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Field.Group>
	<Field.Field>
		<Field.Label for="fieldgroup-name">Name</Field.Label>
		<Input id="fieldgroup-name" placeholder="Jordan Lee" />
	</Field.Field>
	<Field.Field>
		<Field.Label for="fieldgroup-email">Email</Field.Label>
		<Input id="fieldgroup-email" type="email" placeholder="name@example.com" />
		<Field.Description>We'll send updates to this address.</Field.Description>
	</Field.Field>
	<Field.Field orientation="horizontal">
		<Button type="reset" variant="outline">Reset</Button>
		<Button type="submit">Submit</Button>
	</Field.Field>
</Field.Group>

Disabled

Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field.Field component.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Field.Field data-disabled>
	<Field.Label for="input-demo-disabled">Email</Field.Label>
	<Input id="input-demo-disabled" type="email" placeholder="Email" disabled />
	<Field.Description>This field is currently disabled.</Field.Description>
</Field.Field>

Invalid

Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the data-invalid attribute to the Field.Field component.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Field.Field data-invalid>
	<Field.Label for="input-invalid">Invalid Input</Field.Label>
	<Input id="input-invalid" placeholder="Error" aria-invalid />
	<Field.Description>This field contains validation errors.</Field.Description>
</Field.Field>

File

Use the type="file" prop to create a file input.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Field.Field>
	<Field.Label for="picture">Picture</Field.Label>
	<Input id="picture" type="file" />
	<Field.Description>Select a picture to upload.</Field.Description>
</Field.Field>

Inline

Use Field.Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Button } from "$lib/components/ui/button/index.js";
	import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Field.Field orientation="horizontal">
	<Input type="search" placeholder="Search..." />
	<Button>Search</Button>
</Field.Field>

Grid

Use a grid layout to place multiple inputs side by side.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Field.Group class="grid max-w-sm grid-cols-2">
	<Field.Field>
		<Field.Label for="first-name">First Name</Field.Label>
		<Input id="first-name" placeholder="Jordan" />
	</Field.Field>
	<Field.Field>
		<Field.Label for="last-name">Last Name</Field.Label>
		<Input id="last-name" placeholder="Lee" />
	</Field.Field>
</Field.Group>

Required

Use the required attribute to indicate required inputs.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Field.Field>
	<Field.Label for="input-required">
		Required Field <span class="text-destructive">*</span>
	</Field.Label>
	<Input id="input-required" placeholder="This field is required" required />
	<Field.Description>This field must be filled out.</Field.Description>
</Field.Field>

Badge

Use Badge in the label to highlight a recommended field.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Badge } from "$lib/components/ui/badge/index.js";
	import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Field.Field>
	<Field.Label for="input-badge">
		Webhook URL
		<Badge variant="secondary" class="ml-auto">Beta</Badge>
	</Field.Label>
	<Input id="input-badge" type="url" placeholder="https://api.example.com/webhook" />
</Field.Field>

Input Group

To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.

<script lang="ts">
	import InfoIcon from "@lucide/svelte/icons/info";
	import * as Field from "$lib/components/ui/field/index.js";
	import * as InputGroup from "$lib/components/ui/input-group/index.js";
</script>
 
<Field.Field>
	<Field.Label for="input-group-url">Website URL</Field.Label>
	<InputGroup.Root>
		<InputGroup.Input id="input-group-url" placeholder="example.com" />
		<InputGroup.Addon>
			<InputGroup.Text>https://</InputGroup.Text>
		</InputGroup.Addon>
		<InputGroup.Addon align="inline-end">
			<InfoIcon />
		</InputGroup.Addon>
	</InputGroup.Root>
</Field.Field>

Button Group

To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.

<script lang="ts">
	import * as ButtonGroup from "$lib/components/ui/button-group/index.js";
	import * as Field from "$lib/components/ui/field/index.js";
	import { Button } from "$lib/components/ui/button/index.js";
	import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Field.Field>
	<Field.Label for="input-button-group">Search</Field.Label>
	<ButtonGroup.Root>
		<Input id="input-button-group" placeholder="Type to search..." />
		<Button variant="outline">Search</Button>
	</ButtonGroup.Root>
</Field.Field>

Form

A full form example with multiple inputs, a select, and a button.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import * as Select from "$lib/components/ui/select/index.js";
	import { Button } from "$lib/components/ui/button/index.js";
	import { Input } from "$lib/components/ui/input/index.js";
 
	const countries = [
		{ value: "us", label: "United States" },
		{ value: "uk", label: "United Kingdom" },
		{ value: "ca", label: "Canada" },
	];
 
	let country = $state("us");
</script>
 
<form class="w-full max-w-sm">
	<Field.Group>
		<Field.Field>
			<Field.Label for="form-name">Name</Field.Label>
			<Input id="form-name" type="text" placeholder="Evil Rabbit" required />
		</Field.Field>
		<Field.Field>
			<Field.Label for="form-email">Email</Field.Label>
			<Input id="form-email" type="email" placeholder="john@example.com" />
			<Field.Description>We'll never share your email with anyone.</Field.Description>
		</Field.Field>
		<div class="grid grid-cols-2 gap-4">
			<Field.Field>
				<Field.Label for="form-phone">Phone</Field.Label>
				<Input id="form-phone" type="tel" placeholder="+1 (555) 123-4567" />
			</Field.Field>
			<Field.Field>
				<Field.Label for="form-country">Country</Field.Label>
				<Select.Root type="single" items={countries} bind:value={country}>
					<Select.Trigger id="form-country">
						<Select.Value />
					</Select.Trigger>
					<Select.Content>
						<Select.Group>
							{#each countries as item (item.value)}
								<Select.Item value={item.value} label={item.label}>{item.label}</Select.Item>
							{/each}
						</Select.Group>
					</Select.Content>
				</Select.Root>
			</Field.Field>
		</div>
		<Field.Field>
			<Field.Label for="form-address">Address</Field.Label>
			<Input id="form-address" type="text" placeholder="123 Main St" />
		</Field.Field>
		<Field.Field orientation="horizontal">
			<Button type="button" variant="outline">Cancel</Button>
			<Button type="submit">Submit</Button>
		</Field.Field>
	</Field.Group>
</form>

Hover Card Input Group