Text Input
The Text Input component provides a way to receive text based feedback from users.
Examples
import { whisper } from '@oliveai/ldk';
import { WhisperComponentType } from '@oliveai/ldk/dist/whisper/types';
export const textInputWhisper = async () => {
await whisper.create({
label: 'Text Input',
components: [
{
type: WhisperComponentType.TextInput,
label: 'Text Input',
onBlur: (value) => {
console.log('onBlur', value);
},
onChange: (error, value) => {
console.log('onChange', error, value);
},
onFocus: (value) => {
console.log('onFocus', value);
},
tooltip: 'Tooltip Text',
validationError: '',
value: '',
},
{
type: WhisperComponentType.TextInput,
label: 'Text Input',
onBlur: (value) => {
console.log('onBlur', value);
},
onChange: (error, value) => {
console.log('onChange', error, value);
},
onFocus: (value) => {
console.log('onFocus', value);
},
tooltip: 'Tooltip Text',
validationError: 'Validation Error',
value: '',
},
],
});
}
import { React, ReactWhisper } from '@oliveai/ldk'
const TestTextInput = () => {
const [inputValue, setInputValue] = React.useState('');
return (
<oh-whisper label="Text Input" onClose={() => {}}>
<oh-text-input
label="Text Input"
onBlur={(value) => console.log('onBlur', value)}
onChange={(error, value) => setInputValue(value)}
onFocus={(value) => console.log('onFocus', value)}
tooltip="Tooltip Text"
validationError=""
value={inputValue}
/>
<oh-text-input
label="Text Input"
onBlur={(value) => console.log('onBlur', value)}
onChange={(error, value) => setInputValue(value)}
onFocus={(value) => console.log('onFocus', value)}
tooltip="Tooltip Text"
validationError="Validation Error"
value=""
/>
</oh-whisper>
);
};
ReactWhisper.renderNewWhisper(<TestTextInput />);
Last updated