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

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: '',
      },
    ],
  });
}

React

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 />);