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.

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)}

/>