Links

Select

The Select component provides a way for the user to choose between several options within a dropdown.

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
options
array
List of options that will be populated into the select dropdown.
excludeDefaultOptions
boolean
Determines whether to show "None" as the first option within the select dropdown.
onSelect
function
Executes the provided function when the user chooses an option within the select dropdown.
selected
number
The array of the selected option within the select dropdown.
null
validationError
string
Error text that renders beneath the email input.
null
tooltip
string
Text that appears when hovering over the select.
null

Examples

Top Select demonstrates a basic implementation. Bottom Select highlights the validationError prop.
Javascript
React
import { whisper } from '@oliveai/ldk';
import { WhisperComponentType } from '@oliveai/ldk/dist/whisper/types';
export const selectWhisper = async () => {
await whisper.create({
label: 'Select',
components: [
{
type: WhisperComponentType.Select,
excludeDefaultOption: false,
label: 'Select Label',
options: [
'Option One',
'Option Two',
'Option Three',
],
selected: 0,
onSelect: (error, value) => {
console.log('Selected: ', value);
},
validationError: '',
},
],
});
}
import { React, ReactWhisper} from '@oliveai/ldk';
const TestSelect = () => {
const [selectValue, setSelectValue] = React.useState(0);
return (
<oh-whisper label="Select" onClose={() => {}}>
<oh-select
label="Select Label"
excludeDefaultOption={false}
onSelect={(error, value) => setSelectValue(value)}
options={[
'Option One',
'Option Two',
'Option Three',
]}
selected={selectValue}
tooltip="Select Tooltip"
validationError=""
/>
</oh-whisper>
);
};
ReactWhisper.renderNewWhisper(<TestSelect />);