select - multiselect

Select

Select allows you to easily control states. The state variable you define will capture the option as a string.

Each position within the array must contain unique values. Duplicates will result in a React error due to duplicate keys.

You can use the up and down arrow keys for navigation. Space bar allows you to select or deselect options. The 'x' clears the select or multiselect.

If you need to use multiple of these components stacked vertically, assign a 'zIndex' to each one. The first select should have a higher 'zIndex' than the one directly below it, and so on.

import { Select } from "dialui-components";
import { useState } from "react";

const options = ['Helen Palmer Geisel', 'Patricia Neal', 'Dr Seuss', 'Roald Dahl'];

export const MyComponent = () => {
  const [ select, setSelect ] = useState("");

  return (
    <Select
      options={options}
      selectState={select}
      onChange={setSelect}
    />
  )
};

Default Props:

• options= requerid;
• multiple= false;
• selectState= requerid;
• onChange= requerid;
• zIndex= undefined;

Props:

• options: string[];
• multiple: boolean;
• selectState: string;
• onChange: (value: string) => void;
• zIndex?: number;

MultiSelect

To switch from a select to a multiselect, simply define the 'multiselect' prop. The initial state should be an array, either empty or with an initial value. In typeScript use string[] as the generic value in useState<string[]>().

The state variable you define will capture the options as an array of strings. For example: ['option1', 'option2'].

To deselect previously chosen options, click the 'x' next to each one to remove it from the list. To clear the multiselect, click the 'x' next to the caret.

import { Select } from "dialui-components";
import { useState } from "react";

const options = ['Helen Palmer Geisel', 'Patricia Neal', 'Dr Seuss', 'Roald Dahl'];

function MyComponent(){

  const [ multiSelect, setMultiSelect ] = useState<string[]>([]);

  return (
    <Select
      multiple
      options={options}
      onChange={setMultiSelect}
      selectState={multiSelect}
    />
  )
}

Default Props:

• options= requerid;
• multiple= true;
• selectState= requerid;
• onChange= requerid;
• zIndex= undefined;

Props:

• options: string[];
• multiple: boolean;
• selectState: string[];
• onChange: (value: string[]) => void;
• zIndex?: number;