Skip to content

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

Free

Input with Label for Solid

A Name label above a text field, with the placeholder Enter your name. No icon, no description, and no error.

UI library: Ark UI

A Name label above a text field. The placeholder is Enter your name. There is no description, no icon, and no error.

Start here for almost any short text value. A placeholder alone is not a name for the field. Add a hint or an error on the Field when Name is not enough. In Solid, Ark UI connects the label to the input.

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

Input anatomy: input, placeholder, value, caret

Usage

<Field class="w-full max-w-sm">
    <FieldLabel>Name</FieldLabel>
    <Input class="bg-background" placeholder="Enter your name" type="text" />
  </Field>

FAQ

How is the field built?

Field stacks its children vertically with a gap: FieldLabel first, then the Input. w-full max-w-sm sets the width.

Why not use only a placeholder?

A placeholder disappears as soon as people type, isn't a reliable accessible name, and is low contrast. Keep the label; use the placeholder, Enter your name, only as a hint.

What type is the input?

text. Set the type that matches the data, such as email, tel or url, to get the right keyboard on phones and the browser's validation.

How do I hide the label visually?

Keep FieldLabel and give it sr-only. The field is still named for screen readers, which a placeholder alone doesn't do.

How do I add a description or an error?

Add FieldDescription or FieldError inside the same Field, as the Helper Text and Error State examples do.

API Reference

Field

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

Input

Sets placeholder="Enter your name" and type="text". The rest is on the Input page.

All 24 input examples