Skip to content
Home

String

Info
Demos
Properties
Events

Description

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

Demos

Empty

<Field.String onChange={(value) => console.log('onChange', value)} />

Placeholder

<Field.String

  placeholder="Enter a text..."

  onChange={(value) => console.log('onChange', value)}

/>

Label

<Field.String

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

/>

Label and value

<Field.String

  label="Label text"

  value="foo"

  onChange={(value) => console.log('onChange', value)}

/>

Horizontal layout

<Field.String

  label="Label text"

  value="foo"

  layout="horizontal"

  onChange={(value) => console.log('onChange', value)}

/>

Widths

<Field.String

  label="Default width (property omitted)"

  value="foo"

  onChange={(value) => console.log('onChange', value)}

/>

<Field.String

  label="False (for browser default)"

  value="foo"

  width={false}

  onChange={(value) => console.log('onChange', value)}

/>

<Field.String

  label="Medium"

  value="foo"

  width="medium"

  onChange={(value) => console.log('onChange', value)}

/>

<Field.String

  label="Large"

  value="foo"

  width="large"

  onChange={(value) => console.log('onChange', value)}

/>

<Field.String

  label="Stretch"

  value="foo"

  width="stretch"

  onChange={(value) => console.log('onChange', value)}

/>

Icons

<Field.String

  label="Icon left"

  value="foo"

  leftIcon="check"

  onChange={(value) => console.log('onChange', value)}

/>

<Field.String

  label="Icon right"

  value="foo"

  rightIcon="loupe"

  onChange={(value) => console.log('onChange', value)}

/>

Character counter

 0
<Field.String

  onChange={(value) => console.log('onChange', value)}

  characterCounter

/>
3
<Field.String

  label="Label text"

  value="foo"

  onChange={(value) => console.log('onChange', value)}

  characterCounter

/>
3/16
<Field.String

  label="Label text"

  value="foo"

  onChange={(value) => console.log('onChange', value)}

  maxLength={16}

  characterCounter

/>

Clear

<Field.String

  value="foo"

  onChange={(value) => console.log('onChange', value)}

  clear

/>

Disabled

<Field.String

  value="foo"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  disabled

/>

Info

Useful information (?)
<Field.String

  value="foo"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  info="Useful information (?)"

/>

Warning

I'm warning you...
<Field.String

  value="foo"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  warning={new FormError("I'm warning you...")}

/>

Error

This is what is wrong...
<Field.String

  value="foo"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  error={new FormError('This is what is wrong...')}

/>

Validation - Required

<Field.String

  value="foo"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  required

/>

Validation - Minimum length

<Field.String

  value="foo"

  label="Label text (minimum 8 characters)"

  onChange={(value) => console.log('onChange', value)}

  minLength={8}

/>

Validation - Maximum length and custom error message

<Field.String

  value="foo"

  label="Label text (maximum 8 characters)"

  onChange={(value) => console.log('onChange', value)}

  maxLength={8}

  errorMessages={{

    maxLength: "You can't write THAT long.. Max 8 chars!",

  }}

/>

Validation - Pattern

<Field.String

  value="foo"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  pattern="^foo123"

/>

Synchronous external validator (called on every change)

<Field.String

  value="foo"

  label="Label text (minimum 4 characters)"

  validator={(value) =>

    value.length < 4 ? new FormError('At least 4 characters') : undefined

  }

  onChange={(value) => console.log('onChange', value)}

/>

Asynchronous external validator (called on every change)

<Field.String

  value="foo"

  label="Label text (minimum 4 characters)"

  validator={(value) =>

    new Promise((resolve) =>

      setTimeout(

        () =>

          resolve(

            value.length < 5

              ? new FormError('At least 5 characters')

              : undefined

          ),

        1500

      )

    )

  }

  onChange={(value) => console.log('onChange', value)}

/>

Synchronous external validator (called on blur)

<Field.String

  value="foo"

  label="Label text (minimum 4 characters)"

  onBlurValidator={(value) =>

    value.length < 4 ? new FormError('At least 4 characters') : undefined

  }

  onChange={(value) => console.log('onChange', value)}

/>

Asynchronous external validator (called on blur)

<Field.String

  value="foo"

  label="Label text (minimum 4 characters)"

  onBlurValidator={(value) =>

    new Promise((resolve) =>

      setTimeout(

        () =>

          resolve(

            value.length < 5

              ? new FormError('At least 5 characters')

              : undefined

          ),

        1500

      )

    )

  }

  onChange={(value) => console.log('onChange', value)}

/>

Multiline, empty

<Field.String

  onChange={(value) => console.log('onChange', value)}

  multiline

/>

Multiline, placeholder

<Field.String

  placeholder="Enter text here"

  onChange={(value) => console.log('onChange', value)}

  multiline

/>

Multiline, label & value

<Field.String

  value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in tempus odio, nec interdum orci. Integer vehicula ipsum et risus finibus, vitae commodo ex luctus. Nam viverra sollicitudin dictum. Vivamus maximus dignissim lorem, vitae viverra erat dapibus a."

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  multiline

/>

Properties

Standard input component props

PropertyTypeDescription
data-testidstring(optional) Test ID
classNamestring(optional) Outer DOM element class name
valuestring(optional) Source data value for the input
layoutstring(optional) Layout for the label and input. Can be horizontal or vertical
labelstring(optional) Field label to show above / before the input feature
labelDescriptionstring(optional) A more discreet text displayed beside the label (i.e for "(optional)")
labelSecondarystring(optional) Secondary information displayed at the end of the label line (i.e character counter)
placeholderstring(optional) Text showing in place of the value if no value is given
pathstring(optional) JSON Pointer for where the data for this input is located in the source dataset (when using DataContext)
infoError or string(optional) Info message shown below / after the input
warningError or string(optional) Warning message shown below / after the input
errorError(optional) Error message shown below / after the input
disabledboolean(optional) Set true to show the field but without the possibility of changing the value.
emptyValueany(optional) The value to use (in onChange events etc) when emptying the field. Makes it possible for instance to provide undefined instead of an empty string when clearing the content of a text input.
requiredboolean(optional) When set true, the input will give an error if the value cannot be empty.
schemaobject(optional) Custom JSON Schema for validating the value.
validateInitiallystring(optional) Set true to show validation based errors initially (from given value-prop or source data) before the user interacts with the field.
validateUnchangedstring(optional) Set true to show validation based errors when the field is touched (like focusing a field and blurring) without having changed the value. Since the user did not introduce a new error, this will apply when the value was initially invalid based on validation.
continuousValidationstring(optional) Set true to show validation based errors continuously while writing, not just when blurring the field.
errorMessagesobject(optional) Custom error messages for each type of error, overriding default messages.
validatorfunction(optional) Custom validator function that will be called for every change done by the user. Can be asynchronous or synchronous.
onBlurValidatorfunction(optional) Custom validator function that will be called when the user leaves the field (blurring a text input, closing a dropdown etc). Can be asynchronous or synchronous.
toInputfunction(optional) Derivate called when the received / active value is sent to the input. Can be used for casting, changing syntax etc.
fromInputfunction(optional) Derivate called when changes is made by the user, to cast or change syntax back to the original (opposite of toInput).

Component-specific props

PropertyTypeDescription
inputClassNamestring(optional) Class name set on the <input> DOM element
typestring(optional) Input DOM element type
multilineboolean(optional) True to be able to write in multiple lines (switching from input-element to textarea-element)
leftIconstring(optional) For icon at the left side of the text input
rightIconstring(optional) For icon at the right side of the text input
clearboolean(optional) True to have a clickable clear-icon for removing the active value
autoresizeboolean(optional) For multiline, set true to expand when writing longer texts.
autoresizeMaxRowsboolean(optional) For multiline, set how many rows of text can be shown at max.
characterCounterboolean(optional) True to show a character counter.
minLengthboolean(optional) Validation for minimum length of the text (number of characters)
maxLengthboolean(optional) Validation for maximum length of the text (number of characters)
patternboolean(optional) Validation based on regex pattern
widthstring or false(optional)false for no width (use browser default), medium or large for predefined standard widths, stretch for fill available width.
spaceSpace(optional) Spacing object with keys top, right, bottom and left

Events

EventDescription
onChange(optional) Will be called on value changes made by the user, with the new value as argument.
onFocus(optional) Will be called when the component gets into focus. Like clicking inside a text input or opening a dropdown. Called with active value as argument.
onBlur(optional) Will be called when the component stop being in focus. Like when going to next field, or closing a dropdown. Called with active value as argument.