Skip to content

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

Free

Required Field Input for React

A Full Name field with a destructive asterisk, a prompt to enter a full name, and a line under it that says the field is required.

Full Name has an asterisk in the destructive color, and the placeholder asks for a full name. Under the field, the line says it is required.

Use it when the form cannot be sent without this value. The browser blocks an empty submit. Your own wording still belongs on the Field. In React, Base UI does not supply that error text.

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 htmlFor="required-full-name">
    Full Name
    <span aria-hidden="true" className="text-destructive">
      *
    </span>
  </FieldLabel>
  <Input
    className="bg-background"
    id="required-full-name"
    placeholder="Enter your full name"
    required
    type="text"
  />
  <FieldDescription>* Required field</FieldDescription>
</Field>

FAQ

How is the asterisk shown?

A span with text-destructive inside FieldLabel. It has aria-hidden, because the input's required state already tells assistive technology the field is required.

Where is required set?

On the Input, the native required attribute.

What does required do when the form is submitted?

The browser blocks the submit while the field is empty and shows its own message. Screen readers announce the field as required.

Why explain the asterisk?

Not everyone knows the convention. The description, * Required field, says it once; in a longer form, put the note at the top.

How do I show my own error message?

Mark the field invalid and put the message in FieldError, as the Error State example does. The field turns destructive and the error shows under the input.

How is Full Name tied to the field?

Clicking the label focuses the field, and screen readers announce it with the field. FieldLabel sets htmlFor to required-full-name, the input's id.

API Reference

Field

Sets htmlFor="required-full-name". The rest is on the Field page.

Input

Sets id="required-full-name", placeholder="Enter your full name", required and type="text". The rest is on the Input page.

All 24 input examples