104Get started
HextaUI

Field: Required and optional

Set indicator on a FieldGroup, FieldSet or Field and every label inside marks itself from its control's required attribute. "optional" tags the fields people can skip, which reads calmer when most fields are required. "required" adds an asterisk. The mark is hidden from screen readers because the control already announces it.

import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldIndicatorDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8">
      <FieldGroup indicator="optional">
        <Field>
          <FieldLabel>Email</FieldLabel>
          <Input type="email" autoComplete="email" required />
        </Field>
        <Field>
          <FieldLabel>Company</FieldLabel>
          <Input autoComplete="organization" />
        </Field>
      </FieldGroup>
      <FieldSeparator />
      <FieldGroup indicator="required">
        <Field>
          <FieldLabel>Card number</FieldLabel>
          <Input inputMode="numeric" autoComplete="cc-number" required />
        </Field>
        <Field>
          <FieldLabel>Billing note</FieldLabel>
          <Input />
        </Field>
      </FieldGroup>
    </div>
  )
}

Add this example

This adds the example as components/examples/field/indicator.tsx, together with the Field component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/field-indicator.json

To add only the component, follow the Field installation.

Props in this example

The Field props this example sets, from the API reference.

FieldGroup

PropTypeDefault
indicatorApplies to every field inside.
"required" | "optional" | null–

Every prop is in the Field API reference.

More Field examples

See them all, with keyboard support and accessibility notes, on the Field page.

Related components