Description text
A component that provides labeling and validation for form controls. The Field component extends Base UI's Field. It adds a label, a description, and an error message around any input: an Input by default, or Checkbox, Radio, Switch, Select, and more. Use it inside a Form to validate several fields together.
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";
import Input from "./Input";
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(props: BaseField.Control.Props) {
return <Input {...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;Compose Field.Label, Field.Control, Field.Description, and Field.Error inside Field.Root. Field.Control renders an Input, and the label is associated with it automatically.
Description text
Set required, minLength, pattern, or type on the control. Use Field.Error with the match prop to show a message for a ValidityState key.
Pass a validate function to Field.Root. Return an error string, an array of strings, or null. Set validationMode to onBlur or onChange to validate before submit; see the Base UI reference for the details.
Wrap Select, Combobox, Autocomplete, Slider, NumberField, Radio, CheckboxGroup, Checkbox, or Switch in Field.Root to share the same layout and validation.
Searchable list of countries with typeahead.
Used to localize UI labels.
Used to format local times.
How many people are in your team.
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.
Use the Form component to validate several fields together and to display server errors with its errors prop.