Input

import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'

export default function InputBasic() {
  return (
    <div className="flex max-w-sm flex-col gap-6">
      <Field>
        <FieldLabel>Work email</FieldLabel>
        <Input
          type="email"
          name="email"
          autoComplete="email"
          placeholder="name@company.com"
          required
        />
        <FieldDescription>We send invoices here.</FieldDescription>
        <FieldError match="valueMissing">Enter your work email.</FieldError>
        <FieldError match="typeMismatch">Enter an email like name@company.com.</FieldError>
      </Field>
      <Field disabled>
        <FieldLabel>Account ID</FieldLabel>
        <Input defaultValue="acct_4821" />
      </Field>
    </div>
  )
}

'use client'

import { Form } from '@base-ui/react/form'
import { Button } from '@/components/ui/button'
import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'

function validateUsername(value: unknown) {
  const v = String(value ?? '')
  if (v && v.length < 3) return 'Use at least 3 characters.'
  if (v && !/^[a-z0-9-]+$/i.test(v)) return 'Use only letters, numbers and dashes.'
  return null
}

/** Validation runs on blur and on submit; errors are linked to the input and announced. */
export default function FieldValidation() {
  return (
    <Form className="flex max-w-sm flex-col gap-6" onSubmit={(e) => e.preventDefault()}>
      <Field validationMode="onBlur" validate={validateUsername}>
        <FieldLabel>Username</FieldLabel>
        <Input name="username" autoComplete="username" required />
        <FieldDescription>At least 3 characters. Letters, numbers and dashes.</FieldDescription>
        <FieldError match="valueMissing">Enter a username.</FieldError>
        <FieldError />
      </Field>
      <div>
        <Button type="submit">Create account</Button>
      </div>
    </Form>
  )
}