Select
The Select component provides a way for the user to choose between several options within a dropdown.
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 |
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 />);
Last modified 1yr ago