Devie UI
Version: 2026-02-14

<Field />

Description text

The Field component extends Base UI's Field. It uses a text input by default, but it is meant to wrap any input type (Checkbox, CheckboxGroup, Radio, Switch, Select, and more). It provides labels, descriptions, and validation/error display management. Fields are typically used within a Form component that coordinates across multiple Fields.

Installation

Here is the component implementation code that you can copy to your project:

// https://devie-ui.com/components/field
// https://base-ui.com/react/components/field
 
import { Field as BaseField } from "@base-ui/react/field";
import clsx from "clsx";
import styles from "./Field.module.scss";
 
function Root({ className, ...props }: BaseField.Root.Props) {
  return <BaseField.Root className={clsx(styles.root, className)} {...props} />;
}
 
function Label({ className, ...props }: BaseField.Label.Props) {
  return (
    <BaseField.Label className={clsx(styles.label, className)} {...props} />
  );
}
 
function Control({ className, ...props }: BaseField.Control.Props) {
  return (
    <BaseField.Control className={clsx(styles.control, className)} {...props} />
  );
}
 
function Description({ className, ...props }: BaseField.Description.Props) {
  return (
    <BaseField.Description
      className={clsx(styles.description, className)}
      {...props}
    />
  );
}
 
function Item({ className, ...props }: BaseField.Item.Props) {
  return <BaseField.Item className={clsx(styles.item, className)} {...props} />;
}
 
function ErrorField({ className, ...props }: BaseField.Error.Props) {
  return (
    <BaseField.Error className={clsx(styles.error, className)} {...props} />
  );
}
 
const Field = {
  Root,
  Label,
  Control,
  Description,
  Item,
  Error: ErrorField,
  Validity: BaseField.Validity,
};
 
namespace Field {
  export namespace Root {
    export type Props = BaseField.Root.Props;
    export type State = BaseField.Root.State;
  }
  export namespace Label {
    export type Props = BaseField.Label.Props;
  }
  export namespace Control {
    export type Props = BaseField.Control.Props;
  }
  export namespace Description {
    export type Props = BaseField.Description.Props;
  }
  export namespace Item {
    export type Props = BaseField.Item.Props;
  }
  export namespace Error {
    export type Props = BaseField.Error.Props;
  }
  export namespace Validity {
    export type Props = BaseField.Validity.Props;
    export type State = BaseField.Validity.State;
  }
}
 
export default Field;

Use Cases

Simple fields

Compose fields by combining subcomponents: a standalone input, an input with a label, a complete field with description, or a field displaying an error state. Labels are automatically associated with inputs for accessibility.

Description text

Error message

Basic validation with HTML constraints

You can use native HTML5 validation attributes like required, minLength, pattern, and type. Use Field.Error with the match prop to display messages based on the browser's ValidityState.

Standard client-side input validation

For most cases, the best way to add client-side input validation is to use the validate prop on Field.Root. This allows you to define custom validation rules for each input:

  • validate — A function that receives the input value and returns an error message string (or array of strings), or null if valid. Supports async functions for server-side checks.
  • validationMode — Determines when validation runs: "onSubmit" (default, validates on form submit and revalidates on change after), "onBlur" (validates when the input loses focus), or "onChange" (validates on every change).
↓ validationMode="onChange" — validates as you type
↓ validationMode="onBlur" — validates when you leave the field
↓ validationMode="onSubmit" — validates on form submission

Non-text inputs

Fields are designed to wrap any input type, not just text. You can compose them with components like Select, Combobox, Autocomplete, Slider, NumberField, Radio, CheckboxGroup, Checkbox, or Switch while keeping a consistent layout and validation surface.

Searchable list of countries with typeahead.

Used to localize UI labels.

Used to format local times.

How many people are in your team.

40

Reduce alert noise during focus time.

Choose your billing tier.

Select how you want to be notified.

Required to proceed with account creation.

Receive occasional product updates and offers.

Server-side validation and Forms

Server-side actions and error handling are typically managed using the Form component, which coordinates validation across multiple Fields. The Form component provides an onFormSubmit callback for triggering server-side validation and an errors prop to display server-returned errors on specific Fields.