# 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.

Example: https://hextaui.com/docs/field/examples/indicator
Component docs: https://hextaui.com/docs/field.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/field-indicator.json
```

This adds `components/examples/field/indicator.tsx` with the Field component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/field/indicator.tsx"
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>
  )
}
```

## Props in this example

### FieldGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `indicator` | `"required" \| "optional" \| null` | – | Applies to every field inside. |

## More Field examples

- [Input](https://hextaui.com/docs/field/examples/input.md)
- [Validation](https://hextaui.com/docs/field/examples/validation.md)
- [Custom validation](https://hextaui.com/docs/field/examples/custom-validation.md)
- [Status](https://hextaui.com/docs/field/examples/status.md)
- [Character count](https://hextaui.com/docs/field/examples/counter.md)
- [Errors from a form library or server](https://hextaui.com/docs/field/examples/errors.md)
- [Checkboxes](https://hextaui.com/docs/field/examples/checkbox.md)
- [Choice cards](https://hextaui.com/docs/field/examples/choice-card.md)
- [Fieldset](https://hextaui.com/docs/field/examples/fieldset.md)
- [Responsive](https://hextaui.com/docs/field/examples/responsive.md)
- [Disabled](https://hextaui.com/docs/field/examples/disabled.md)
- [Long content](https://hextaui.com/docs/field/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/field/examples/rtl.md)