The <TextField> is a form component which allows user to enter text with a keyboard. It creates interactive controls for web-based forms in order to accept data from the user.
It is also one of the most powerful and complex elements in all of HTML due to the sheer number of combinations of input types and attributes.
Text fields consist of an input element, which is a container in which the user enters data, and a label which informs the user about the content they need to enter in the field.
<TextField> automatically manages the relationship between these two elements. It also supports optional description
and error message elements, which can be used to provide more
context about the field, and any validation messages.
The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
The selected theme does not has any options for"variant" and "size".
Use a <TextField> if a user needs to input unique information that cannot be predicted with a preset of options
(e.g. Radio, Select etc.) and
also a user needs to input memorable data that can be entered more quickly in a free-hand format versus a more
complex
control.
Avoid using <TextField> if a user can only enter an option from a predefined list then avoid using a free-form
text
input as it is likely to result in an error. Consider using a selection control such as a dropdown, select, or
radio
button group instead.
In general label should be short and precise about what is expected from the user. Avoid unnecessary instructional
verbs (doing words) in your labels and hints because it's already implied by the input field.
Avoid placeholder text in most cases, as there's no need for it (more about it in the next section).
Placeholder text is a short hint displayed inside an input field before
a user enters a value. To save space, placeholder text is often used instead of a label, as shown in the first
example.
This is problematic for the following reasons:
Placeholder text disappears once a person starts filling in an input field, causing some to forget what the
field
was for
Some might miss or skip fields with placeholder text, as it can look like the field has already been pre-filled.
Placeholder text colour contrast is almost always inaccessible, as it's very light by design. This means many
will
struggle to read the label.
Sometimes the label isn't enough for the user. In this case, to gather additional support for the user we can use
the
help text. With this we can add helpful hints for the user below the input field. Beside that the help text is
placed
in close proximity to the associated input field.
Error messages should let people know that a problem occurred, why it happened, and provide a solution to fix it
and move forward.
Don't
Never blame the user. Always be positive and helpful.
Don't
Be concise and avoid unnecessary words like "please", "sorry" and "oops"
Do
Use detailed messages instead of global messages.
The error prop toggles the error state of a field. The errorMessage prop can then be used to provide feedback to
the user about the error. The message disappears automatically when all requirements are met.
Enter your 5 digit zip code.
import { useState } from 'react';import { TextField } from '@marigold/components';export default () => { const [zipCode, setZipCpode] = useState<string>('7911'); return ( <TextField label="Zip code" pattern="[0-9]{5}" value={zipCode} description="Enter your 5 digit zip code." errorMessage="Your zip code hasn't 5 digits. Update it and try again." onChange={setZipCpode} /> );};
Note
Press Enter, after typing your text, to trigger the validation.
