Skip to content

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

Free

Input with Description Below Field for Svelte

A Username field with the placeholder johndoe, and the line Choose a unique username for your account under the field.

UI library: Ark UI

Username sits above the field. The placeholder is johndoe. Under the field: Choose a unique username for your account.

This order suits a hint people read while the value is filled. The field itself is an Input and does not know if the name is free. Ark UI in Svelte does not reserve it.

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>Username</FieldLabel><Input placeholder="johndoe" type="text" /><FieldDescription>Choose a unique username for your account.</FieldDescription></Field>

FAQ

Where does the helper text sit?

The order inside Field is FieldLabel, then Input, then FieldDescription. The description reads Choose a unique username for your account.

How does Username name the input?

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

What is the placeholder for?

The placeholder is johndoe, and it clears once someone types. The description stays under the field.

What type is the input?

type is text. orientation is left unset, so the field stays vertical.

How wide is the field?

max-w-md on Field caps the width. The label, input, and description all use that column.

How do I put the hint above the input instead?

Move FieldDescription so it sits between FieldLabel and Input. That order shows the sentence before anyone types.

API Reference

Field

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

Input

Sets placeholder="johndoe" and type="text". The rest is on the Input page.

All 38 field examples