Text Input
The Text Input component provides a way to receive text based feedback from users.
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. | '' |
Top Text Input demonstrates a basic implementation. Bottom Text Input highlights the
validationError prop.Javascript
React
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 modified 1yr ago