Field

"use client";

import * as React from "react";
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function Demo() {
  const [email, setEmail] = React.useState("");
  const invalid = email.length > 0 && !email.includes("@");

  return (
    <FieldGroup className="max-w-sm">
      <Field data-invalid={invalid || undefined}>
        <FieldLabel htmlFor="email-field" required>
          E-mail
        </FieldLabel>
        <Input
          id="email-field"
          type="email"
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          aria-invalid={invalid || undefined}
          aria-describedby="email-field-help"
        />
        <FieldDescription id="email-field-help">Usamos só para notificações.</FieldDescription>
        {invalid ? <FieldError>Informe um e-mail válido.</FieldError> : null}
      </Field>

      <Field data-invalid>
        <FieldLabel htmlFor="cpf-field" required>
          CPF
        </FieldLabel>
        <Input
          id="cpf-field"
          required
          defaultValue="123.456.789-0"
          aria-invalid
          aria-describedby="cpf-field-error"
        />
        <FieldError id="cpf-field-error">O CPF tem 11 dígitos. Faltou um.</FieldError>
      </Field>

      <Field data-disabled="true">
        <FieldLabel htmlFor="plano-field">Plano</FieldLabel>
        <Input id="plano-field" defaultValue="Pro (anual)" disabled />
        <FieldDescription>Troca de plano só pelo suporte.</FieldDescription>
      </Field>
    </FieldGroup>
  );
}