code: fakemui,tsx,textfield (1 files)

This commit is contained in:
Richard Ward
2025-12-30 20:18:16 +00:00
parent 0d39ba0f6e
commit 1bf9f8425a

View File

@@ -1,4 +1,4 @@
import React, { forwardRef } from 'react'
import React, { forwardRef, useId } from 'react'
import { FormLabel } from './FormLabel'
import { FormHelperText } from './FormHelperText'
import { Input, InputProps } from './Input'
@@ -10,13 +10,18 @@ export interface TextFieldProps extends InputProps {
}
export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
({ label, helperText, error, className = '', ...props }, ref) => (
<div className={`text-field ${error ? 'text-field--error' : ''} ${className}`}>
{label && <FormLabel>{label}</FormLabel>}
<Input ref={ref} error={error} {...props} />
{helperText && <FormHelperText error={error}>{helperText}</FormHelperText>}
</div>
)
({ label, helperText, error, className = '', id: providedId, ...props }, ref) => {
const generatedId = useId()
const id = providedId ?? generatedId
return (
<div className={`text-field ${error ? 'text-field--error' : ''} ${className}`}>
{label && <FormLabel htmlFor={id}>{label}</FormLabel>}
<Input ref={ref} id={id} error={error} {...props} />
{helperText && <FormHelperText error={error}>{helperText}</FormHelperText>}
</div>
)
}
)
TextField.displayName = 'TextField'