ProfileSettingsForm() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ ProfileSettingsForm() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

export function ProfileSettingsForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Profile Settings</CardTitle>
        <CardDescription>
          Update your profile information and preferences
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <FieldGroup>
            <Field>
              <FieldLabel>Profile Photo</FieldLabel>
              <div className="flex items-center space-x-4">
                <Avatar className="size-12">
                  <AvatarImage src="/abstract-profile.png" />
                  <AvatarFallback>JD</AvatarFallback>
                </Avatar>
                <Button variant="outline" type="button">
                  Change Photo
                </Button>
              </div>
            </Field>

            <div className="grid grid-cols-2 gap-4">
              <Field>
                <FieldLabel htmlFor="profileFirstName-h2r">
                  First Name
                </FieldLabel>
                <Input id="profileFirstName-h2r" defaultValue="John" />
              </Field>
              <Field>
                <FieldLabel htmlFor="profileLastName-cal">Last Name</FieldLabel>
                <Input id="profileLastName-cal" defaultValue="Doe" />
              </Field>
            </div>

            <Field>
              <FieldLabel htmlFor="profileEmail-e4m">Email</FieldLabel>
              <Input
                id="profileEmail-e4m"
                type="email"
                defaultValue="john@example.com"
              />
            </Field>
            <Field>
              <FieldLabel htmlFor="phone-olk">Phone Number</FieldLabel>
              <Input
                id="phone-olk"
                type="tel"
                placeholder="+1 (555) 123-4567"
              />
            </Field>
            <Field>
              <FieldLabel htmlFor="bio-jlq">Bio</FieldLabel>
              <Textarea
                id="bio-jlq"
                placeholder="Tell us about yourself..."
                className="min-h-[80px]"
              />
            </Field>

            <FieldSet>
              <FieldLegend>Notification Preferences</FieldLegend>
              <FieldDescription>
                Manage your notification preferences.
              </FieldDescription>
              <FieldGroup>
                <Field orientation="horizontal">
                  <FieldContent>
                    <FieldLabel htmlFor="emailNotifications-xfj">
                      Email notifications
                    </FieldLabel>
                    <FieldDescription>
                      Receive emails about new products, features, and more. If
                      you don&apos;t want to receive these emails, you can turn
                      them off.
                    </FieldDescription>
                  </FieldContent>
                  <Switch