Field

import * as Field from '@base-ui/react/Field';

import * as Field from '@base-ui/react/Field';

function MyField() {
  return (
    <Field.Root name="email">
      <Field.Label>Email</Field.Label>
      <Field.Control
        type="email"
        placeholder="Enter your email"
        required
      />
      <Field.Description>We'll never share your email.</Field.Description>
      <Field.Error match="valueMissing">Email is required</Field.Error>
      <Field.Error match="typeMismatch">Please enter a valid email</Field.Error>
    </Field.Root>
  );
}

<Field.Root name="age">
  <Field.Label>Age</Field.Label>
  <Field.Control
    type="number"
    required
    min="18"
    max="120"
  />
  <Field.Error match="valueMissing">Age is required</Field.Error>
  <Field.Error match="rangeUnderflow">Must be at least 18</Field.Error>
  <Field.Error match="rangeOverflow">Must be less than 120</Field.Error>
</Field.Root>

function validatePassword(value: unknown) {
  const password = String(value);
  
  if (password.length < 8) {
    return 'Password must be at least 8 characters';
  }
  
  if (!/[A-Z]/.test(password)) {
    return 'Password must contain an uppercase letter';
  }
  
  return null;
}

<Field.Root name="password" validate={validatePassword}>
  <Field.Label>Password</Field.Label>
  <Field.Control type="password" />
  <Field.Error match="customError" />
</Field.Root>

async function checkUsernameAvailable(value: unknown, formValues: Form.Values) {
  const username = String(value);
  const response = await fetch(`/api/check-username?username=${username}`);
  const { available } = await response.json();
  
  return available ? null : 'Username is already taken';
}

<Field.Root name="username" validate={checkUsernameAvailable}>
  <Field.Label>Username</Field.Label>
  <Field.Control />
  <Field.Error match="customError" />
</Field.Root>

// Validate on blur
<Field.Root name="email" validationMode="onBlur">
  {/* ... */}
</Field.Root>

// Validate on every change
<Field.Root name="email" validationMode="onChange">
  {/* ... */}
</Field.Root>

// Validate on change with debounce
<Field.Root
  name="email"
  validationMode="onChange"
  validationDebounceTime={300}
>
  {/* ... */}
</Field.Root>

.Field-root[data-invalid] {
  border-color: red;
}

.Field-root[data-valid] {
  border-color: green;
}

.Field-control:focus {
  outline: 2px solid blue;
}

.Field-error {
  color: red;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.Field-label {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.Field-description {
  color: gray;
  font-size: 0.875rem;
}

function MyForm() {
  const actionsRef = React.useRef<Field.Actions>(null);

  return (
    <Field.Root name="email" actionsRef={actionsRef}>
      <Field.Label>Email</Field.Label>
      <Field.Control type="email" />
      <Field.Error match="typeMismatch">Invalid email</Field.Error>
      
      <button type="button" onClick={() => actionsRef.current?.validate()}>
        Validate Now
      </button>
    </Field.Root>
  );
}