---
title: Field
description: >-
  A form field wrapper for labels, descriptions, and validation messaging around
  input controls.
---

# Field

## Overview

Fields wrap form controls with a label, validation messaging, and optional supporting text. They give users additional context and helpful feedback when filling out forms.

```tsx
<Field label="Email" description="You can change this later">
	<Input defaultValue="hello@example.com" placeholder="email@example.com" />
</Field>
```

## Usage Guidelines

- **Write clear labels:** Keep labels concise, specific, and descriptive of the control. Use sentence case and avoid punctuation or emojis.
- **Apply input validation constraints:** Apply native HTML validation attributes directly to the control and custom validation as a function on the Field.
- **Add guidance when needed:** Add a description in cases where users need context before interacting, such as formatting rules or irreversible consequences.

## API Reference

### `Field`

| Prop          | Type                                 | Default     |
| ------------- | ------------------------------------ | ----------- |
| `label`       | `ReactNode`                          | `undefined` |
| `description` | `ReactNode`                          | `undefined` |
| `children`    | `ReactNode`                          | `undefined` |
| `invalid`     | `boolean`                            | `undefined` |
| `name`        | `string`                             | `undefined` |
| `validate`    | `(value: unknown) => string \| null` | `undefined` |

## Examples

### Native HTML validation

Use native HTML validation attributes on the control to enforce built-in constraints such as required values, formats, and length limits.

```tsx
<Form>
	<Field name="password" label="Password" description="At least 8 characters">
		<Input type="password" placeholder="Enter a password" required minLength={8} />
	</Field>
</Form>
```

### Custom validation

Use the Field `validate` prop when validation depends on custom logic. Keep cusotm validation messaging succinct and clear.

```tsx
<Form validationMode="onChange">
	<Field
		name="username"
		label="Username"
		description="Cannot be 'admin'"
		validate={(value) => {
			if (value === "admin") {
				return "Reserved for system use";
			}
			return null;
		}}
	>
		<Input placeholder="Enter a username" />
	</Field>
</Form>
```

### Inline layout

Fields automatically switch to an inline layout when wrapping controls such as switches and checkboxes, so the control and label read as a single setting row.

```tsx
<Field
	label="Email notifications"
	description="Receive updates about comments and mentions"
	name="notifications"
>
	<Switch defaultChecked />
</Field>
```