Field is a high level component with a few possible uses:
- Is used in all specific Field components, e.g. TextField
- Can be used to make your own custom fields in a consistent way
- All Element form inputs inherit styles and functionality from this base field component.
- Use the field component as a starting point to construct a new form input with custom functionality.
- Don't use the field component without an input. It exists only to be used as a starting point or base for our form inputs.
Live example
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
v3+ |
|
Web (@ovotech/element) |
✅ |
|
App (@ovotech/element-native) |
✅ |
How to use it
Field label
Start from a straightforward tone of voice. In 1-2 words, what goes here?
- Use as few words as possible
- Mark optional fields as (optional)
- Use sentence case
- Don’t treat this copy as explainer text – this will just complicate the task
- Don't show "required" fields or add an astrix to indicate this
- Never use punctuation at the end of the line
Hint text
In as few characters as possible, what should I know to avoid an error?
- Be instructional
- No need for full sentences
- Aim for few words
- Use sentence case
- Don’t use this text if there’s something a user wouldn’t immediately understand from the rest of the component (ex: how to format)
- Never use punctuation at the end of the line
Error messages
In as few characters as possible, how do I fix my entry? (Verb + noun)
- Avoid default HTML form validation
- Avoid validation during input
- Always validate and show error messages once the form has been submitted
Error messages should appear above the input, and below the label and help text. These should be written in a concise, specific, way using plain language and without pleasantries.
Always be tolerant of mistakes like extra spaces or differing formats. Allow both “07” and “7” for example.
- Be concise. Readers should see the message, get it, and move on
- Call out what will fix the issue
- Ideally, create a message for each potential error
- Use sentence case
- Don’t use cute language or ‘banter’ which adds cognitive load
- Don’t talk down to or tease the customer
- Never use punctuation at the end of the line
Placeholder text
We generally avoid placeholder text unless it’s specifically to show the shape of the desired input, e.g. DD-MM-YYYY.
Examples
Properties
|
Name |
Values |
Default |
|---|---|---|
|
id (required) |
String |
|
|
label (required) |
String |
|
|
optional |
Boolean |
false |
|
hint |
ReactNode |
|
|
error |
ReactNode |
|
|
characters |
Number |
25 |
|
fullWidth |
boolean |
|
|
affixWidth |
Number |
0 |
|
... |
JSX.IntrinsicElements["input"] |
|
Related components
TextField
NumberField
EmailField
PhoneField
PasswordField
CurrencyField
TextareaField
DateField
SelectField
Radio
Checkbox
Related patterns
External links