AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-10-14 17:54:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Raise form inputs to a 44px touch target with 16px text

Browse Source
This commit is contained in:
Aaron Po
2026-10-13 01:32:28 -04:00
parent 0780349a79
commit 19791df6a5
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/frontend/app/components/ui/forms/FormField.tsx
View File

@@ -21,19 +21,26 @@ const FormField = ({
}: FormFieldProps) => { }: FormFieldProps) => {
return ( return (
<Field className={className ?? 'space-y-1'}> <Field className={className ?? 'space-y-1'}>
<Label htmlFor={inputProps.id} className={labelClassName ?? 'label font-medium'}> <Label
htmlFor={inputProps.id}
className={labelClassName ?? 'label text-sm font-semibold text-base-content'}
>
{label} {label}
</Label> </Label>
<input <input
{...inputProps} {...inputProps}
className={inputClassName ?? `input w-full ${error ? 'input-error' : ''}`} className={
inputClassName ?? `input h-11 w-full text-base ${error ? 'input-error' : ''}`
}
/> />
{error ? ( {error ? (
<Description className={hintClassName ?? 'label text-error'}>{error}</Description> <Description className={hintClassName ?? 'text-xs text-error'}>{error}</Description>
) : hint ? ( ) : hint ? (
<Description className={hintClassName ?? 'label'}>{hint}</Description> <Description className={hintClassName ?? 'text-xs text-[var(--color-muted)]'}>
{hint}
</Description>
) : null} ) : null}
</Field> </Field>
); );