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.

<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

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.

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

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

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