Select

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
1
import { whisper } from '@oliveai/ldk';
2
import { WhisperComponentType } from '@oliveai/ldk/dist/whisper/types';
3
​
4
export const selectWhisper = async () => {
5
  await whisper.create({
6
    label: 'Select',
7
    components: [
8
      {
9
        type: WhisperComponentType.Select,
10
        excludeDefaultOption: false,
11
        label: 'Select Label',
12
        options: [
13
          'Option One',
14
          'Option Two',
15
          'Option Three',
16
        ],
17
        selected: 0,
18
        onSelect: (error, value) => {
19
          console.log('Selected: ', value);
20
        },
21
        validationError: '',
22
      },
23
    ],
24
  });
25
}
26
​
Copied!
1
import { React, ReactWhisper} from '@oliveai/ldk';
2
​
3
const TestSelect = () => {
4
  const [selectValue, setSelectValue] = React.useState(0);
5
  
6
  return (
7
    <oh-whisper label="Select" onClose={() => {}}>
8
      <oh-select
9
        label="Select Label"
10
        excludeDefaultOption={false}
11
        onSelect={(error, value) => setSelectValue(value)}
12
        options={[
13
          'Option One',
14
          'Option Two',
15
          'Option Three',
16
        ]}
17
        selected={selectValue}
18
        tooltip="Select Tooltip"
19
        validationError=""
20
      />
21
    </oh-whisper>
22
  );
23
};
24
​
25
ReactWhisper.renderNewWhisper(<TestSelect />);
Copied!

Whisper Components - Previous

Section Title

Next - Whisper Components

Text Input

Last modified 21d ago

Copy link

Contents

Props

Examples