Should I mark required or optional fields?

Mark whichever is the minority. If most fields are required, tag the optional ones.

Forms

Label

Accessible form labels with required and optional markers.

Labels name form controls so everyone, including screen-reader users, knows what to type. Cuelark labels add a required asterisk that is announced as "required", or a quiet mono "optional" tag for forms where most fields are required.

Preview

Company

VAT numberoptional

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/label.json

The CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/label.

Usage

import { Label } from "@/components/ui/label";

<Label htmlFor="email" required>Email</Label>
<Input id="email" required />

API reference

Label

Extends Radix Label.Root.

Prop	Type	Default	Description
required	boolean	false	Asterisk announced as "required".
optional	boolean	false	Mono "optional" tag.

Accessibility

Clicking the label focuses its control (htmlFor).
The asterisk is aria-hidden; screen readers hear "required" instead.

FAQ

Also searched as: react label · shadcn label · form label · required field indicator · radix label