Skip to content

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

Free

Required Textarea for React

A textarea labeled Message with a red asterisk after the label, and the required flag set on the field.

The label Message ends with a red asterisk, hidden from screen readers so it is not read twice. The placeholder is Type your message. The field is marked required.

Use it when an empty message should not submit. The browser blocks that submit. The asterisk is the visible cue. One line belongs in an Input. In React, Base UI does not add an error message.

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

Textarea anatomy: textarea, caret, placeholder, resize handle

Usage

<Field className="max-w-md">
  <FieldLabel htmlFor="required-textarea-message">
    Message
    <span aria-hidden="true" className="text-destructive">
      *
    </span>
  </FieldLabel>
  <Textarea
    className="bg-background"
    id="required-textarea-message"
    placeholder="Type your message..."
    required
  />
</Field>

FAQ

When should I mark textarea fields as required?

Only when you can't process the form without the value: the message of a contact form, the body of a comment. Every extra required field is a reason to abandon the form, so leave the rest optional.

Is the red asterisk accessible for screen readers?

The asterisk is hidden from screen readers with aria-hidden, because the required attribute already makes them announce the field as required. The asterisk is only there for sighted users scanning the form. The asterisk is a span inside the FieldLabel, and required goes on the Textarea itself.

How do I validate required textareas on submit?

The required attribute already stops an empty submit with the browser's own message. For your own message, check the value when the form submits, mark the Field invalid and show a FieldError under the Textarea, as the Textarea with Error example does.

Can I use different colors for the required indicator?

Yes: it's a class on the asterisk, so swap text-destructive for another theme color. Red is the convention people recognize, though, and whatever you choose, use the same indicator on every required field of the form.

Should the asterisk go before or after the label text?

After, as here. It's the most common convention and keeps the label readable from its first word. Put it in the same place on every field.

Should I mark required fields or optional fields?

Mark whichever is rarer. When most fields are optional, mark the few required ones with an asterisk; when most are required, mark the optional ones instead, as the Textarea with Hint example does. Marking both adds noise.

API Reference

Field

Sets htmlFor="required-textarea-message". The rest is on the Field page.

Textarea

Sets id="required-textarea-message", placeholder="Type your message..." and required. The rest is on the Textarea page.

All 13 textarea examples