Field

Fields allow the user to input data.
There are several types of field in Element.

Field is a high level component with a few possible uses:

  1. Is used in all specific Field components, e.g. TextField
  2. 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

Storybook failed to load. Please connect to the VPN to access.

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

null
null
null
null
null
null
null
null

Properties

Name

Values

Default

id (required)

String

 

label (required)

String

 

optional

Boolean

false

hint

ReactNode

 

error

ReactNode

 

characters

Number

25

fullWidth

boolean

 

affixWidth
Account for an icon when calculating width based on characters

Number

0

...
Passed to the child element

JSX.IntrinsicElements["input"]

 


Related components


Related patterns


External links