@blaze-react/select NPM | npm.io

0.7.0 • Published 8 months ago

Install

Weekly downloads

976

License

ISC

Repository

Last release

8 months ago

Description

The select component represents an input that provides a menu of options.

Usage

Array of options

const options = ["London", "Paris", "Munich"];

<Select
  label="Select a city"
  options={options}
  onChange={({ event, value }) => {}}
  required
/>;

Multidimensional Array of options

const options = [
  ["08001", "Barcelona"],
  ["17006", "Madrid"],
];

<Select
  label="Select label"
  selected="08001"
  options={options}
  onChange={({ event, value }) => {}}
/>;

Array of objects

const arrayOfObjects = [
  {
    id: 1,
    username: "Oscar",
    age: 26,
  },
  {
    id: 2,
    username: "Ismael",
    age: 23,
  },
];

<Select
  label="Select user"
  selected="1"
  options={options}
  keys={["id", "username"]}
  onChange={({ event, value }) => {}}
/>;

Disabling some options

const disabled = ["17006"]


<Select label="Disabled option" onChange={({ event, value }) => {}} options={options} disabled={disabled} />

By default is disabled if none options

<Select label="Disabled" onChange={({ event, value }) => {}} options={[]} />

API

Select can receive a number of `props` as follow:

NAME	TYPE	DEFAULT
label	String	''
required	Boolean	false
options	Array	[]
selected	String	''
keys	Array	[]
onChange	Function	() => {}
disabled	Array	[]
defaultTextValue	String	Please Choose...

@everything-registry/sub-chunk-130 @blaze-cms/plugin-data-ui @blaze-cms/react-page-builder @infinitebrahmanuniverse/nolb-_bla

8 months ago

11 months ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago