#String

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<Field.String
  value="foo"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  warning={new FormError("I'm warning you...")}
/>

<Field.String
  value="foo"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new FormError('This is what is wrong...')}
/>

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

<Field.String
  value="foo"
  label="Label text (minimum 8 characters)"
  onChange={(value) => console.log('onChange', value)}
  minLength={8}
/>

<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!",
  }}
/>

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

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

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

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

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

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

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

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

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