Skip to content

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

Free

Label with Optional Indicator for Ark UI

The label Phone Number with a muted (optional) on the same line, for a field that is not required.

Phone Number is the label. On the same line, muted text reads (optional).

Mark the optional fields when almost every field is required. A destructive asterisk on a Field label is the other convention. Ark UI in React does not know which fields are optional.

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

Label anatomy: label, control, text

Usage

<Label>
  Phone Number
  <span className="font-normal text-muted-foreground">(optional)</span>
</Label>

FAQ

How is the optional marker written?

As the text (optional) inside the label, after Phone Number. The span is font-normal text-muted-foreground.

Why does the marker look quieter than the caption?

Label is font-medium. The span sets font-normal and text-muted-foreground, so the word optional drops the weight and uses the muted color.

What puts (optional) on the same line?

Label is a flex row with gap-2. The span is a child, so it follows Phone Number. The file adds no margin class.

Does (optional) change validation?

No. There is no input in the file. The marker is text. Leave required off the control when that field can be empty.

Will a screen reader say optional?

Yes. The word is text inside the label, so it is part of the caption. The demo does not set an aria-label that would replace it.

How do I point this label at the phone input?

Give the input an id and point the label at it. The (optional) span can stay inside the label, where it is now. Set htmlFor to the input's id.

API Reference

Label

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

All 8 label examples