Field

Wrapper for inputs to provide context such as label/help/required etc.

Source

Want to skip the docs? Try our MCP Server

#
Documentation

#
Usage

Wrap your actual input controls with Field to show additional context for the input.

Input label

Description

Error

Label

Required


"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Field, Input } from "@optiaxiom/react";
 
export function App({
  description,
  error,
  label = "Input label",
  required = false,
}: Pick<
  ComponentPropsWithoutRef<typeof Field>,
  "description" | "error" | "label" | "required"
>) {
  return (
    <Field
      description={description}
      error={error}
      label={label}
      required={required}
    >
      <Input placeholder="Enter text..." />
    </Field>
  );
}

#
Required

Enable the required prop to display an asterisk for required inputs.

Input labelRequired


import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field label="Input label" required>
      <Input placeholder="Enter text..." />
    </Field>
  );
}

#
Description

Use the description prop to provide help text for the input.

Input label

Input description


import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field description="Input description" label="Input label">
      <Input placeholder="Enter text..." />
    </Field>
  );
}

#
Error

Use the error prop to display validation or other errors for the input.

Input label

Field is required


import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field error="Field is required" label="Input label">
      <Input placeholder="Enter text..." />
    </Field>
  );
}

The error prop will be available as a boolean to the input element via a FieldContext.

#
Information

Use the info prop to display a help icon with additional context for the input.

Input label


import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field info="This is additional information" label="Input label">
      <Input placeholder="Enter text..." />
    </Field>
  );
}

Field provides a FieldContext that automatically forwards the error prop to child input components. This allows inputs to style themselves appropriately (e.g., showing a red outline) when an error is present.

For example, when you set error on a Field wrapping an Input, the Input receives the error state as a boolean and can apply error styling automatically.

#
Rich Content

The label, description, error, and info props all accept ReactNode, allowing you to pass rich content beyond simple strings.

Email address

Read our privacy policy for more information.

Password

Password must be at least 8 characters and include a number.


import { Field, Group, Input, Link } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16">
      <Field
        description={
          <>
            Read our{" "}
            <Link external href="#">
              privacy policy
            </Link>{" "}
            for more information.
          </>
        }
        label="Email address"
      >
        <Input placeholder="you@example.com" type="email" />
      </Field>
      <Field
        error={
          <>
            Password must be at least <strong>8 characters</strong> and include
            a number.
          </>
        }
        label="Password"
      >
        <Input placeholder="Enter password" type="password" />
      </Field>
    </Group>
  );
}

#
With Different Inputs

Field works with any form input component, not just Input.

Message

Share your thoughts with us.

CountryRequired


import {
  Field,
  Group,
  Select,
  SelectContent,
  SelectTrigger,
  Textarea,
} from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16">
      <Field description="Share your thoughts with us." label="Message">
        <Textarea placeholder="Enter your message..." rows={3} />
      </Field>
      <Field label="Country" required>
        <Select
          options={[
            { label: "United States", value: "us" },
            { label: "United Kingdom", value: "uk" },
            { label: "Canada", value: "ca" },
          ]}
        >
          <SelectTrigger placeholder="Select a country" />
          <SelectContent />
        </Select>
      </Field>
    </Group>
  );
}

#
Accessibility

Field automatically handles accessibility attributes for you:

Associates labels with inputs using htmlFor and id
Connects error and description text using aria-describedby
Generates unique IDs for labels and inputs

You can override the auto-generated IDs using the inputId and labelId props if needed for custom integrations.

#
Common Patterns

Here are some common real-world patterns using Field:

Email addressRequired

We'll never share your email with anyone else.

PasswordRequired

Must be at least 8 characters


"use client";
 
import { Field, Group, Input } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
 
  const emailError =
    email && !email.includes("@") ? "Please enter a valid email" : undefined;
  const passwordError =
    password && password.length < 8
      ? "Password must be at least 8 characters"
      : undefined;
 
  return (
    <Group flexDirection="column" gap="16">
      <Field
        description="We'll never share your email with anyone else."
        error={emailError}
        label="Email address"
        required
      >
        <Input
          onChange={(e) => setEmail(e.target.value)}
          placeholder="you@example.com"
          type="email"
          value={email}
        />
      </Field>
      <Field
        description="Must be at least 8 characters"
        error={passwordError}
        info="Choose a strong password to protect your account"
        label="Password"
        required
      >
        <Input
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Enter password"
          type="password"
          value={password}
        />
      </Field>
    </Group>
  );
}

#
Props

#
Field

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`description` Provide description and help text for the field. `ReactNode`
`error` Display validation or other errors for the input. `ReactNode`
`info` Display a help icon with additional context for the input. `ReactNode`
`inputId` Override the default generated input ID used for associating the label to the input. `string`
`label` The label of the field. `ReactNode`
`labelId` Override the default generated label ID used for associating the controls to the label. `string`
`required` Display an asterisk for required inputs. `false \| true`

#
Changelog

#
0.1.0

Added component