Skip to content

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

Free

Input with Label for Ark UI

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

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 React, Ark UI connects the label to the input.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Input anatomy: input, placeholder, value, caret

Usage

<Field className="w-full max-w-sm">
  <FieldLabel>Name</FieldLabel>
  <Input
    className="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