User Profile Form

Build a user profile form component with properly associated labels and descriptions for accessibility.

Requirements

Create a React form component that collects user profile information with the following fields:

1. Username field: A text input for entering a username, with a label "Username" and a description "Must be 3-20 characters long"

2. Email field: A text input for entering an email address, with a label "Email Address" and a description "We'll never share your email with anyone else"

3. Bio field: A textarea for entering a biography, with a label "Bio" and a description "Write a short bio about yourself (max 200 characters)"

4. Newsletter checkbox: A checkbox for opting into newsletters, with a label "Subscribe to newsletter" and a description "Receive weekly updates about new features"

The form should be fully accessible, with all labels and descriptions properly associated with their corresponding inputs using appropriate ARIA attributes. Do not manually manage IDs or ARIA attributes - the library should handle this automatically.

Test Cases

• The username input has an associated label with text "Username" @test
• The username input has an associated description with text "Must be 3-20 characters long" @test
• The email input has both a label and description properly associated via ARIA attributes @test
• The bio textarea has both a label and description properly associated via ARIA attributes @test
• The newsletter checkbox has both a label and description properly associated via ARIA attributes @test

Implementation

@generates

API

import React from 'react';

/**
 * UserProfileForm component that renders an accessible form with properly
 * associated labels and descriptions for all form fields.
 */
export function UserProfileForm(): JSX.Element;

Dependencies { .dependencies }

@headlessui/react { .dependency }

Provides accessible UI components with automatic label and description association.