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

picklist-option

v1.10.0arrow_drop_down
v1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
50
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
20 KB
Represents a list options in a menu.
1 contributor
Install picklist-option as a package?
Copied
npm i @bit/nexxtway.react-rainbow.picklist-option
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
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
chevron_left
chevron_right
PicklistOption base
import React from 'react';
import { Picklist, PicklistOption } from 'react-rainbow-components';

const containerStyles = {
    width: '200px',
};

initialState = { value: { name: 'option 1', label: 'Experimental Building' } };

<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
                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="Plaza" />
                <PicklistOption name="option 4" label="Central Park" />
            </Picklist>
        </div>
    </GlobalHeader>
</div>
PicklistOption with icons
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/user3.jpg"
        className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large"
    >
        <div className="rainbow-flex rainbow-align_right">
            <Picklist
                style={containerStyles}
                placeholder="Choose Building"
                onChange={value => setState({ value })}
                value={state.value}
                label="Select Building"
                hideLabel
            >
                <PicklistOption name="option 1" label="Empire State" icon={<BuildingIcon />} />
                <PicklistOption name="option 2" label="Chrysler Building" icon={<BuildingIcon />} />
                <PicklistOption name="option 3" label="Plaza" icon={<BuildingIcon />} />
                <PicklistOption name="option 4" label="Central Park" icon={<BuildingIcon />} />
            </Picklist>
        </div>
    </GlobalHeader>
</div>
Properties
NameTypeDefault value
icon
nodenull
isVisible
(required)
bool
position
(required)
string