ComplexFormInvalidDemo() — ui Function Reference

Architecture documentation for the ComplexFormInvalidDemo() function in field-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ComplexFormInvalidDemo() — ui Function Reference

Dependency Diagram

graph TD
  11d5f8fd_d4b7_8016_d95f_4c52ada55460["ComplexFormInvalidDemo()"]
  b9b36d9d_9701_6134_d4ee_41213e7f1788["field-demo.tsx"]
  11d5f8fd_d4b7_8016_d95f_4c52ada55460 -->|defined in| b9b36d9d_9701_6134_d4ee_41213e7f1788
  style 11d5f8fd_d4b7_8016_d95f_4c52ada55460 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/field-demo.tsx lines 4172–4491

export function ComplexFormInvalidDemo() {
  const [startDate, setStartDate] = useState<Date>()
  const [experience, setExperience] = useState([3])
  const [workType, setWorkType] = useState("hybrid")

  return (
    <Card className="w-full max-w-3xl">
      <CardContent>
        <form>
          <FieldGroup>
            <FieldSet>
              <FieldLegend>Personal Information</FieldLegend>
              <FieldDescription>
                Your basic contact information.
              </FieldDescription>
              <FieldGroup>
                <div className="grid grid-cols-2 gap-4">
                  <Field data-invalid>
                    <FieldLabel htmlFor="firstName-invalid-ygm">
                      First Name
                    </FieldLabel>
                    <Input
                      id="firstName-invalid-ygm"
                      placeholder="John"
                      required
                      aria-invalid
                    />
                  </Field>
                  <Field data-invalid>
                    <FieldLabel htmlFor="lastName-invalid-qlq">
                      Last Name
                    </FieldLabel>
                    <Input
                      id="lastName-invalid-qlq"
                      placeholder="Doe"
                      required
                      aria-invalid
                    />
                  </Field>
                </div>
                <Field data-invalid>
                  <FieldLabel htmlFor="email-invalid-8tl">
                    Email Address
                  </FieldLabel>
                  <Input
                    id="email-invalid-8tl"
                    type="email"
                    placeholder="john.doe@example.com"
                    required
                    aria-invalid
                  />
                  <FieldDescription>
                    We&apos;ll use this for all communications.
                  </FieldDescription>
                </Field>
                <div className="grid grid-cols-2 gap-4">
                  <Field data-invalid>
                    <FieldLabel htmlFor="phone-invalid-2r4">
                      Phone Number
                    </FieldLabel>
                    <Input
                      id="phone-invalid-2r4"
                      type="tel"
                      placeholder="+1 (555) 123-4567"
                      aria-invalid
                    />
                  </Field>
                  <Field data-invalid>
                    <FieldLabel htmlFor="birthdate-invalid-49m">
                      Date of Birth
                    </FieldLabel>
                    <Popover>
                      <PopoverTrigger asChild>
                        <Button
                          id="birthdate-invalid-49m"
                          variant="outline"
                          className={cn(
                            "w-full justify-start text-left font-normal",
                            !startDate && "text-muted-foreground"
                          )}
                        >