picklist
v1.10.0arrow_drop_downv1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
48
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
26 KB
A Picklist provides a user with an read-only input field that is accompanied with
a listbox of pre-defined options.
1 contributor
Like
Install picklist as a package?
Copied
npm i @bit/nexxtway.react-rainbow.picklist
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example 
modifieddraft
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
and packages in Bit or NPM to the example. any of the 1 million componentstoggle layout


modifieddraft
chevron_left
chevron_right
Picklist base
import React from 'react';
import { Picklist, PicklistOption } from 'react-rainbow-components';
const containerStyles = {
width: '200px',
};
initialState = { value: { name: 'option 3', label: 'Central Park' } };
<div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
<GlobalHeader
src="images/user/user2.jpg"
className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large"
>
<div className="rainbow-flex rainbow-align_right">
<Picklist
id="picklist-1"
style={containerStyles}
onChange={value => setState({ value })}
value={state.value}
label="Select Building"
hideLabel
>
<PicklistOption name="header" label="Your Buildings" variant="header" />
<PicklistOption name="option 1" label="Experimental Building" />
<PicklistOption name="option 2" label="Empire State" />
<PicklistOption name="option 3" label="Central Park" />
</Picklist>
</div>
</GlobalHeader>
</div>
Picklist with multiple options
import React from 'react';
import { Picklist, PicklistOption } from 'react-rainbow-components';
const containerStyles = {
width: '200px',
};
initialState = { value: null };
<div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
<GlobalHeader
src="images/user/user1.jpg"
className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large"
>
<div className="rainbow-flex rainbow-align_right">
<Picklist
id="picklist-3"
style={containerStyles}
placeholder="Choose Building"
onChange={value => setState({ value })}
value={state.value}
label="Select Building"
hideLabel
>
<PicklistOption name="option 1" label="All Buildings" icon={<DashboardIcon />} />
<PicklistOption name="option 2" label="New Building" icon={<AddFilledIcon />} />
<PicklistOption name="header" label="Your Buildings" variant="header" />
<PicklistOption name="option 3" label="Experimental" icon={<BuildingIcon />} />
<PicklistOption name="option 4" label="Bennet Towers" icon={<BuildingIcon />} />
<PicklistOption name="option 5" label="Empire State" icon={<BuildingIcon />} />
<PicklistOption name="option 6" label="Central Park" icon={<BuildingIcon />} />
<PicklistOption name="option 7" label="Chrysler" icon={<BuildingIcon />} />
<PicklistOption name="option 8" label="Plaza" icon={<BuildingIcon />} />
</Picklist>
</div>
</GlobalHeader>
</div>
Picklist disabled
import React from 'react';
import { Picklist, PicklistOption } from 'react-rainbow-components';
const containerStyles = {
width: '180px',
};
initialState = { value: { name: 'option 1', label: 'All Buildings' } };
<div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
<GlobalHeader
src="images/user/user2.jpg"
className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large"
>
<div className="rainbow-flex rainbow-align_right">
<Picklist
disabled
value={state.value}
label="Select Building"
hideLabel
style={containerStyles}
>
<PicklistOption name="option 1" label="Experimental Building" />
<PicklistOption name="option 2" label="Empire State" />
<PicklistOption name="option 3" label="Central Park" />
</Picklist>
</div>
</GlobalHeader>
</div>
Picklist with redux-form
import React from 'react';
import { Picklist, PicklistOption, ButtonIcon } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUpload } from '@fortawesome/free-solid-svg-icons';
import { Field, reduxForm } from 'redux-form';
const containerStyles = {
width: '140px',
};
function Form({ handleSubmit, onSubmit }) {
return (
<form
className="rainbow-flex rainbow-align_right rainbow-flex_wrap"
noValidate
onSubmit={handleSubmit(onSubmit)}
>
<Field
style={containerStyles}
component={Picklist}
name="option"
placeholder="Choose"
label="Select Building"
hideLabel
>
<PicklistOption name="option 1" label="All Buildings" />
<PicklistOption name="option 2" label="New Building" />
<PicklistOption name="header 2" label="Your Buildings" variant="header" />
<PicklistOption name="option 3" label="Experimental" />
<PicklistOption name="option 4" label="Empire State" />
</Field>
<ButtonIcon
variant="border"
icon={<FontAwesomeIcon icon={faUpload} />}
className="rainbow-m-left_small"
type="submit"
/>
</form>
);
}
const PicklistForm = reduxForm({
form: 'picklist-form',
touchOnBlur: false,
})(Form);
<div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
<GlobalHeader
src="images/user/user3.jpg"
className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large"
>
<PicklistForm onSubmit={values => console.log(values)} />
</GlobalHeader>
</div>
Picklist with PicklistOption changed dynamically
import React from 'react';
import { Picklist, PicklistOption, ButtonIcon } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faDownload } from '@fortawesome/free-solid-svg-icons';
const containerStyles = {
width: '200px',
};
initialState = { value: { name: 'option 3', label: 'Central Park' } };
class PicklistExample extends React.Component {
constructor(props) {
super(props);
this.state = {
isBuildingsAdded: false,
};
}
addNewBuildings() {
const { isBuildingsAdded } = this.state;
this.setState({ isBuildingsAdded: !isBuildingsAdded });
}
renderNewBuildings() {
const { isBuildingsAdded } = this.state;
if (isBuildingsAdded) {
return <PicklistOption name="option 4" label="One World Trade Center" />;
}
return null;
}
render() {
return (
<div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
<GlobalHeader className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large" src="images/user/user3.jpg">
<div className="rainbow-flex rainbow-align_right">
<Picklist
id="picklist-9"
style={containerStyles}
onChange={value => setState({ value })}
value={state.value}
label="Select Building"
hideLabel
>
<PicklistOption name="option 1" label="Experimental Building" />
{this.renderNewBuildings()}
<PicklistOption name="option 2" label="Empire State" />
<PicklistOption name="option 3" label="Central Park" />
</Picklist>
</div>
<ButtonIcon
id="button-icon_add-new-buildings"
className="rainbow-m-left_small"
onClick={() => this.addNewBuildings()}
variant="border"
icon={<FontAwesomeIcon icon={faDownload} />}
/>
</GlobalHeader>
</div>
);
}
}
<PicklistExample />;
Properties
Name | Type | Default value |
---|---|---|
arrow (required) | 'up' | 'down' | |
onMouseEnter | function | () => {} |
onMouseLeave | function | () => {} |
className | string | '' |
style | object | {} |