Dropdown Select

Dropdown Select components are used for collecting user provided information from a list of options.

Import

import { DropdownSelect } from "pier-ui";

Single Select

import React, { useState } from "react";
import { DropdownSelect } from "@pier-ui";
const Example = () => {
const [selected, setSelected] = useState({});
const options = [
{ label: "Grapes", value: "grapes" },
{ label: "Mango", value: "mango" },
{ label: "Strawberry", value: "strawberry" },
];
const selectChange = (list) => {
setSelected(list);
};
return (
<>
  <div className="wrap">
    <DropdownSelect
      options={options}
      value={selected}
      onChange={selectChange}
      label="Single select"
      placeholder="Select"
      className="custom-class"
      closeOnChange={true}
      />
  </div>
<style jsx>{`
  .wrap {
    padding: 30px 0px;
  }
`}</style>
 </>
); };
export default Example;

Multi Select

import React, { useState } from "react";
import { DropdownSelect } from "@pier-ui";
const ExampleDropdownSelectMultiple = () => {
  const [selected, setSelected] = useState([]);
  const options = [
    { label: "Grapes", value: "grapes" },
    { label: "Mango", value: "mango" },
    { label: "Strawberry", value: "strawberry" },
  ];
  const selectChange = (list) => {
    setSelected(list);
  };
  return (
    <>
      <div className="wrap">
        <DropdownSelect
          multiple
          options={options}
          value={selected}
          onChange={selectChange}
          label="Multi select"
          placeholder="Select"
          className="custom-class"
        />
      </div>
      <style jsx>{`
        .wrap {
          padding: 15px 0px 20px;
        }
      `}</style>
    </>
  );
};
export default ExampleDropdownSelectMultiple;

Props

Prop	Description	Type	Default
`className`	className for the component	`string`
`options`	Options for the select (is required)	`array`
`value`	pre-selected option ListboxSelect (is required)	`{ label:, value: }` `[{ label:, value: }]`
`label`	Label for dropdown	`string`
`floatingLabel`	floatingLabel	`boolean`	`false`
`placeholder`	placeholder for the dropdown	`string`
`size`	Size of the dropdown: "base", "sm", "md", "lg"	`string`	`base`
`color`	Color of the dropdown	`string`	`theme.colors.grey`
`focusColor`	Color of the dropdown	`string`	`theme.colors.primary`
`closeOnChange`	Whether the dropdown closes when a selection is made.	`boolean`	`false`
`disabled`		`boolean`	`false`
`required`		`boolean`	`false`
`readOnly`		`boolean`	`false`
`multiple`	Render the Multi Select Dropdown	`boolean`	`false`
`variant`	Variant of the dropdown: "outline", "filled"	`string`	`outline`
`width`	Width of the dropdown	`string`

Documentation

Dropdown Select

Import

Single Select

Multi Select

Props