select

v1.9.0

v1.7.0

v1.6.1

v1.4.0

STATUS

Passing

DOWNLOADS

VISIBILITY

Public

PUBLISHED

2 weeks ago

SIZE

21 KB

Select element presents a menu of options.

React

UI Components

select

1 contributor

Use select in your project ?

Copied

npm i @bit/nexxtway.react-rainbow.select

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.dev

Component Example

React

Vue

Angular

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

select basic

import React from 'react';
import { Select } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};

const options = [
    { value: 'option 1', label: 'Option 1' },
    { value: 'option 2', label: 'Option 2' },
    { value: 'option 3', label: 'Option 3' },
];

<Select
    label="Select Label"
    options={options}
    id="example-select-1"
    style={containerStyles}
    className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
/>;

select required

import React from 'react';
import { Select } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};

const options = [
    { value: 'option 1', label: 'Option required 1' },
    { value: 'option 2', label: 'Option required 2' },
    { value: 'option 3', label: 'Option required 3' },
];

<Select
    label="Select Label"
    required
    options={options}
    style={containerStyles}
    className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
/>;

select disabled

import React from 'react';
import { Select } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};

const options = [
    { value: 'option 1', label: 'Option disabled 1' },
    { value: 'option 2', label: 'Option disabled 2' },
    { value: 'option 3', label: 'Option disabled 3' },
];

<Select
    label="Select Label"
    disabled
    options={options}
    style={containerStyles}
    className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
/>;

select with error

import React from 'react';
import { Select } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};

const options = [
    { value: 'option 1', label: 'Option with error 1' },
    { value: 'option 2', label: 'Option with error 2' },
    { value: 'option 3', label: 'Option with error 3' },
];

<Select
    label="Select Label"
    required
    error="this field is required"
    options={options}
    style={containerStyles}
    className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
/>;

select controlled example

import React from 'react';
import { Select } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};

const options = [
    { value: 'option 1', label: 'Option controlled 1', disabled: false },
    { value: 'option 2', label: 'Option controlled 2', disabled: false },
    { value: 'option 3', label: 'Option controlled 3', disabled: true },
];

class ControlledSelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: undefined };
        this.handleOnSelect = this.handleOnSelect.bind(this);
    }

    handleOnSelect(event) {
        this.setState({ value: event.target.value });
    }

    render() {
        const { value } = this.state;
        return (
            <Select
                label="Select Label"
                required
                options={options}
                value={value}
                onChange={this.handleOnSelect}
                style={containerStyles}
                className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
            />
        );
    }
}

<ControlledSelect />;

Properties

Name	Type	Default value	Description
label	`string \| node`	`undefined`	Text label for the select.
name	`string`	`undefined`	The name of the select.
value	`string \| number`	`undefined`	Specifies the selected value.
onChange	`function`	`() => {}`	The action triggered when a option item is selected.
onClick	`function`	`() => {}`	The action triggered when the element is clicked.
onFocus	`function`	`() => {}`	The action triggered when the element receives focus.
onBlur	`function`	`() => {}`	The action triggered when the element releases focus.
error	`string \| node`	`null`	Specifies that an input field must be filled out before submitting the form. This value defaults to false.
required	`bool`	`false`	Specifies that an input field must be filled out before submitting the form. This value defaults to false.
disabled	`bool`	`false`	Specifies that an input element should be disabled. This value defaults to false.
options	`{"label":"string \| node","value":"string \| node","disabled":"bool"}[]`	`[]`	The option items to be displayed.
className	`string`	`undefined`	A CSS class for the outer element, in addition to the component’s base classes.
style	`object`	`undefined`	An object with custom style applied to the outer element.
id	`string`	`undefined`	The id of the outer element.
hideLabel	`bool`	`false`	The id of the outer element.