Email

Props
Name
Type
Description
Required
Default
label
string
Text that sits inside of the input and floats above the cursor in the input on focus.
null
onBlur
function
Executes the provided function when the user removes focus from the input.
null
onChange
function
Executes the provided function when the user alters the value of the input.
​
onFocus
function
Executes the provided function when the user focuses into the input.
null
tooltip
string
Text that appears when hovering over the input.
null
validationError
string
When not '' or undefined, outlines the input in red and renders the provided text in red beneath the input.
null
value
string
State value associated with the input.
null
Examples
Top Email Input demonstrates a basic implementation. Bottom Email Input highlights the validationError prop.
Javascript
React
1
import { whisper } from '@oliveai/ldk';
2
import {
3
  WhisperComponentType,
4
} from '@oliveai/ldk/dist/whisper/types';
5
​
6
export const emailWhisper = async () => {
7
  await whisper.create({
8
    label: 'Email Input',
9
    components: [
10
      {
11
        type: WhisperComponentType.Email,
12
        label: 'Email Input',
13
        onBlur: (error) => {
14
          console.log('onBlur', error);
15
        },
16
        onChange: (error, value) => {
17
          console.log('onChange', error, value);
18
        },
19
        onFocus: (error) => {
20
          console.log('onFocus', error);
21
        },
22
        tooltip: 'Tooltip Text',
23
        validationError: '',
24
        value: '',
25
      },
26
      {
27
        type: WhisperComponentType.Email,
28
        label: 'Email Input',
29
        onBlur: (error) => {
30
          console.log('onBlur', error);
31
        },
32
        onChange: (error, value) => {
33
          console.log('onChange', error, value);
34
        },
35
        onFocus: (error) => {
36
          console.log('onFocus', error);
37
        },
38
        tooltip: 'Tooltip Text',
39
        validationError: 'Validation Error',
40
        value: '',
41
      },
42
    ],
43
  });
44
}
45
​
Copied!
1
import * as React from 'react';
2
import '@oliveai/ldk';
3
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';
4
​
5
const TestEmailInput = () => {
6
  const [inputValue, setInputValue] = React.useState('');
7
  
8
  return (
9
    <oh-whisper label="Email Input" onClose={() => {}}>
10
      <oh-email
11
        label="Email Input"
12
        onBlur={(error) => console.log('onBlur', error)}
13
        onChange={(error, value) => setInputValue(value)}
14
        onFocus={(error) => console.log('onFocus', error)}
15
        tooltip="Tooltip Text"
16
        validationError=""
17
        value={inputValue}
18
      />
19
      <oh-email
20
        label="Email Input"
21
        onBlur={(error) => console.log('onBlur', error)}
22
        onChange={(error, value) => setInputValue(value)}
23
        onFocus={(error) => console.log('onFocus', error)}
24
        tooltip="Tooltip Text"
25
        validationError="Validation Error"
26
        value=""
27
      />
28
    </oh-whisper>
29
  );
30
};
31
​
32
ReactWhisper.renderNewWhisper(<TestEmailInput />);
Copied!

Whisper Components - Previous

DropZone

Next - Whisper Components

Icon

Last modified 21d ago

Copy link

Contents

Props

Examples