Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

select

v1.9.0arrow_drop_down
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
33
VISIBILITY
Public
PUBLISHED
2 weeks ago
SIZE
21 KB
Select element presents a menu of options.
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
React
Vue
Angular
Add dependency... help_outline
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';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
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
NameTypeDefault valueDescription
label
string | nodeundefined

Text label for the select.

name
stringundefined

The name of the select.

value
string | numberundefined

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 | nodenull

Specifies that an input field must be filled out before submitting the form. This value defaults to false.

required
boolfalse

Specifies that an input field must be filled out before submitting the form. This value defaults to false.

disabled
boolfalse

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
stringundefined

A CSS class for the outer element, in addition to the component’s base classes.

style
objectundefined

An object with custom style applied to the outer element.

id
stringundefined

The id of the outer element.

hideLabel
boolfalse

The id of the outer element.