Text Field
The TextField
is a wrapper around the native input
HTML element.
Therefore, the component accepts the parameters accepted by
HTMLInputElement
, and a further innerRef
parameter to pass a React ref
to the inner input:
type Props = React.InputHTMLAttributes<unknown> & {
innerRef?: LegacyRef<HTMLInputElement>;
};
Usage
<div className={'flex flex-col space-y-4'}>
<TextField>
<TextField.Label>
Email Address
<TextField.Input placeholder={'your@email.com'} />
</TextField.Input>
</TextField>
<TextField>
<TextField.Label>
Password
<TextField.Input
type={'password'}
placeholder={'**************'}
/>
<TextField.Hint>Yo! Make it strong :)</TextField.Hint>
</TextField.Label>
</TextField>
</div>