Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Simple Input with Label Field for Svelte

An Email label above an email field. The placeholder is you@example.com, and it clears as soon as someone types.

UI library: Ark UI

Email sits above an email field. The placeholder is you@example.com, and it clears once someone types. There is no hint under the field.

Start here for a short value with a visible name. An icon or a prefix inside the field is an Input Group. Ark UI in Svelte does not check the address.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Field anatomy: root, label, input, description, error

Usage

<Field class="max-w-md"><FieldLabel>Email</FieldLabel><Input placeholder="you@example.com" type="email" /></Field>

FAQ

How does the Email label connect to the input?

FieldLabel names the input. Field connects the two for you, with no ids to write. The label text is Email.

Why is the label above the input?

orientation defaults to vertical, so the label stacks over the control. Field sets data-orientation to that value.

Why is this input an email field?

type is email. The placeholder is you@example.com, and it clears once someone types.

How wide is the field?

max-w-md on Field caps the width. The label and the input both fill that width in the vertical layout.

How do I add a hint under the input?

Put FieldDescription after the Input. This demo is only the label and the input.

How do I show an error on this field?

Set invalid on Field when the value fails, and render the message with FieldError. The input still holds the value.

API Reference

Field

No extra props in this demo. The rest is on the Field page.

Input

Sets placeholder="you@example.com" and type="email". The rest is on the Input page.

All 38 field examples