Add description option for inputs

app/components/forms.tsx

@@ -37,16 +37,22 @@ export function ErrorList({
 	)
 }
 
+export function Description({ text }: { text: string }) {
+	return <p className="text-sm text-muted-foreground">{text}</p>
+}
+
 export function Field({
 	labelProps,
 	inputProps,
 	errors,
 	className,
+	description,
 }: {
 	labelProps: Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'className'>
 	inputProps: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'>
 	errors?: ListOfErrors
 	className?: string
+	description?: string
 }) {
 	const fallbackId = useId()
 	const id = inputProps.id ?? fallbackId
@@ -60,6 +66,7 @@ export function Field({
 				aria-describedby={errorId}
 				{...inputProps}
 			/>
+			{description && <Description text={description} />}
 			<div className="min-h-[32px] px-4 pb-3 pt-1">
 				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
 			</div>

app/routes/_auth+/onboarding.tsx

@@ -171,7 +171,7 @@ export default function OnboardingPage() {
 					<Field
 						labelProps={{
 							htmlFor: fields.username.id,
-							children: 'Username (Cannot be an email address)',
+							children: 'Username',
 						}}
 						inputProps={{
 							...conform.input(fields.username),
@@ -181,17 +181,22 @@ export default function OnboardingPage() {
 								typeof fields.username.initialError !== 'undefined',
 						}}
 						errors={fields.username.errors}
+						description="Cannot be an email address"
 					/>
 					<Field
-						labelProps={{ htmlFor: fields.name.id, children: 'Name' }}
+						labelProps={{ htmlFor: fields.name.id, children: 'Full Name' }}
 						inputProps={{
 							...conform.input(fields.name),
 							autoComplete: 'name',
 						}}
 						errors={fields.name.errors}
 					/>
 					<Field
-						labelProps={{ htmlFor: fields.phone.id, children: 'Phone Number' }}
+						labelProps={{
+							htmlFor: fields.phone.id,
+							children: 'Phone Number',
+						}}
+						description="Must be 10 digits"
 						inputProps={{
 							...conform.input(fields.phone, { type: 'tel' }),
 							autoComplete: 'tel',