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.

There is a corresponding Value.String component.

Autocomplete and 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>
  1. 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.

Demos

Empty

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

Placeholder

Code Editor
<Field.String
  placeholder="Enter a text..."
  onChange={(value) => console.log('onChange', value)}
/>

Label

Code Editor
<Field.String
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
/>

Label and value

Code Editor
<Field.String
  label="Label text"
  value="foo"
  onChange={(value) => console.log('onChange', value)}
/>

With help

Code Editor
<Field.String
  label="Label text"
  value="foo"
  help={{
    title: 'Help is available',
    contents:
      'Take the time to help other people without expecting a reward or gratitude is definitely important in living an optimistic life.',
  }}
  onChange={(value) => console.log('onChange', value)}
/>

Horizontal layout

Code Editor
<Field.String
  label="Label text"
  value="foo"
  layout="horizontal"
  onChange={(value) => console.log('onChange', value)}
/>

Widths

Code Editor
<Field.String
  label="Default width (property omitted)"
  value="foo"
  onChange={(value) => console.log('onChange', value)}
/>
<Field.String
  label="Small"
  value="foo"
  width="small"
  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

Code Editor
<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
Code Editor
<Field.String
  onChange={(value) => console.log('onChange', value)}
  characterCounter
/>
3
Code Editor
<Field.String
  label="Label text"
  value="foo"
  onChange={(value) => console.log('onChange', value)}
  characterCounter
/>
3/16
Code Editor
<Field.String
  label="Label text"
  value="foo"
  onChange={(value) => console.log('onChange', value)}
  maxLength={16}
  characterCounter
/>

Clear

Code Editor
<Field.String
  value="foo"
  onChange={(value) => console.log('onChange', value)}
  clear
/>

Disabled

Code Editor
<Field.String
  value="foo"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Info

Useful information (?)
Code Editor
<Field.String
  value="foo"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  info="Useful information (?)"
/>

Warning

I'm warning you...
Code Editor
<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...
Code Editor
<Field.String
  value="foo"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new FormError('This is what is wrong...')}
/>

Validation - Required

Code Editor
<Field.String
  value="foo"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  required
/>

Validation - Minimum length

Code Editor
<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

Code Editor
<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

Code Editor
<Field.String
  value="foo"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  pattern="^foo123"
/>

Synchronous external validator (called on every change)

Code Editor
<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)

Code Editor
<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)

Code Editor
<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)

Code Editor
<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

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

Multiline, placeholder

Code Editor
<Field.String
  placeholder="Enter text here"
  onChange={(value) => console.log('onChange', value)}
  multiline
/>

Multiline, label & value

Code Editor
<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
/>

Multiline, with help

Code Editor
<Field.String
  label="Label text"
  help={{
    title: 'Help is available',
    contents: 'There is more happiness in giving than in receiving.',
  }}
  multiline
  onChange={(value) => console.log('onChange', value)}
/>