LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props
  • Examples

Was this helpful?

  1. Whisper Components

Select

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

PreviousSection TitleNextText Input

Last updated 3 years ago

Was this helpful?

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

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 />);
Top Select demonstrates a basic implementation. Bottom Select highlights the validationError prop.