select
v1.10.0arrow_drop_down




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 />;
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. |