The TextField
component is a wrapper around the native input
element. It provides a consistent styling and layout for text-based inputs. It can be combined with the Label
and Hint
components to create a complete form field.
Basic TextField
The simplest usage of the TextField
component is to use it as a wrapper around the native input
element.
import { TextFieldInput } from '~/core/ui/TextField';
<TextFieldInput
placeholder="Enter your name"
/>
TextField with Label
You can wrap the TextFieldInput
component with the TextFieldLabel
component to create a form field with a label.
import { TextFieldInput, TextFieldLabel } from '~/core/ui/TextField';
<TextFieldLabel>
Name
<TextFieldInput
placeholder="Enter your name"
/>
</TextFieldLabel>
TextField with Label and Hint
You can add a hint to the TextFieldLabel
component to provide additional information to the user.
import {
TextFieldInput,
TextFieldLabel,
TextFieldHint
} from '~/core/ui/TextField';
<TextFieldLabel>
Name
<TextFieldInput
placeholder="Enter your name"
/>
<TextFieldHint>
This is a hint
</TextFieldHint>
</TextFieldLabel>