The Email Input component provides a way for the user to enter in their email.
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 |
Top Email Input demonstrates a basic implementation. Bottom Email Input highlights the
validationError prop.Javascript
React
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: '',
},
],
});
}
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 />);
Last modified 8mo ago