Email

The Email Input component provides a way for the user to enter in their 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

import { whisper } from '@oliveai/ldk';
import {
  WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';

export const emailWhisper = async () => {
  await whisper.create({
    label: 'Email Input',
    components: [
      {
        type: WhisperComponentType.Email,
        label: 'Email Input',
        onBlur: (error) => {
          console.log('onBlur', error);
        },
        onChange: (error, value) => {
          console.log('onChange', error, value);
        },
        onFocus: (error) => {
          console.log('onFocus', error);
        },
        tooltip: 'Tooltip Text',
        validationError: '',
        value: '',
      },
      {
        type: WhisperComponentType.Email,
        label: 'Email Input',
        onBlur: (error) => {
          console.log('onBlur', error);
        },
        onChange: (error, value) => {
          console.log('onChange', error, value);
        },
        onFocus: (error) => {
          console.log('onFocus', error);
        },
        tooltip: 'Tooltip Text',
        validationError: 'Validation Error',
        value: '',
      },
    ],
  });
}

React

import * as React from 'react';
import '@oliveai/ldk';
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';

const TestEmailInput = () => {
  const [inputValue, setInputValue] = React.useState('');
  
  return (
    <oh-whisper label="Email Input" onClose={() => {}}>
      <oh-email
        label="Email Input"
        onBlur={(error) => console.log('onBlur', error)}
        onChange={(error, value) => setInputValue(value)}
        onFocus={(error) => console.log('onFocus', error)}
        tooltip="Tooltip Text"
        validationError=""
        value={inputValue}
      />
      <oh-email
        label="Email Input"
        onBlur={(error) => console.log('onBlur', error)}
        onChange={(error, value) => setInputValue(value)}
        onFocus={(error) => console.log('onFocus', error)}
        tooltip="Tooltip Text"
        validationError="Validation Error"
        value=""
      />
    </oh-whisper>
  );
};

ReactWhisper.renderNewWhisper(<TestEmailInput />);