#String

#Import

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.String />)

#Description

Field.String is the base component for receiving user input where the target data is of type string.

There is a corresponding Value.String component.

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.String path="/myValue" />)

#Relevant links

• Source code
• Docs code

#Browser autofill

The string component does support HTML autocomplete attributes.

1. You may either set the property directly on each field:

<Form.Handler>
  <Field.String autoComplete="first-name" path="/your-pointer" />
  <Field.String autoComplete="last-name" path="/your-pointer" />
</Form.Handler>

2. Or use the "less-code" approach, by just giving the data pointer path a meaningful name:

<Form.Handler autoComplete={true}>
  <Field.String path="/firstName" />
  <Field.String path="/lastName" />
</Form.Handler>

The path property will be used to set the name attribute.

#Accessibility

Avoid using the maxlength attribute when possible, as it is not accessible. Instead, use TextCounter together with Field.String.

A demo of how to use the TextCounter with Field.String can be found here.

This way, the user receives visual feedback on the number of characters entered and the maximum allowed, without being limited in their workflow.

You can still set the desired maximum number of characters by using the maxLength property in Eufemia Forms.