# @askrjs/themes/field

> Published API exports for @askrjs/themes/field.

Source: [https://askrjs.com/docs/reference/api/themes/field](https://askrjs.com/docs/reference/api/themes/field)

Status: stable. Packages: @askrjs/themes/field.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 6 exports from the declarations shipped by @askrjs/themes.

### `Field`

```ts
Field: (props: FieldProps) => JSX.Element
```

Groups a form control with its hint/error text, marking `data-invalid` when `invalid` is set.

### `FieldError`

```ts
FieldError: (props: FieldErrorProps) => JSX.Element
```

Renders validation error text for a {@link Field}, exposed with `role="alert"`.

### `FieldErrorProps`

```ts
FieldErrorProps: ParagraphProps & {
  children?: unknown;
  ref?: Ref<HTMLParagraphElement>;
}
```

Props for the {@link FieldError } component.

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLParagraphElement>;

### `FieldHint`

```ts
FieldHint: (props: FieldHintProps) => JSX.Element
```

Renders supporting hint text for a {@link Field}.

### `FieldHintProps`

```ts
FieldHintProps: ParagraphProps & {
  children?: unknown;
  ref?: Ref<HTMLParagraphElement>;
}
```

Props for the {@link FieldHint } component.

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLParagraphElement>;

### `FieldProps`

```ts
FieldProps: DivProps & {
  children?: unknown;
  invalid?: boolean;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link Field } component.

- `children`: children?: unknown;

- `invalid`: invalid?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/themes/empty/index.md) | [Next](https://askrjs.com/docs/reference/api/themes/form/index.md)