Select

Exposed dropdown menus display the currently selected menu item above the menu. - Material Docs

import { Select } from 'material-bread';

Select or Exposed Menus allow selecting an item from a dropdown. The base component is built from the Menu and TextField components. You can pass any props down to them using menuProps and textFieldProps .

Select



Select



Select



Live Editing

class DropdownPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        selectedItem: '',
        selectedItemTwo: '',
        selectedItemThree: ''
    }
  }
  render() {
    const data = [
      { id: 1, name: 'Option 1' },
      { id: 2, name: 'Option 2' },
      { id: 3, name: 'Option 3' },
    ];
    return (
      <View >
        <Select
          label={'Select'}
          menuItems={data}
          onSelect={value => this.setState({ selectedItem: value.name })}
          selectedItem={this.state.selectedItem}
        />
        <Select
          label={'Select'}
          type={'filled'}
          menuItems={data}
          onSelect={value => this.setState({ selectedItemTwo: value.name })}
          selectedItem={this.state.selectedItemTwo}
        />
        <Select
          label={'Select'}
          type={'outlined'}
          menuItems={data}
          onSelect={value => this.setState({ selectedItemThree: value.name })}
          selectedItem={this.state.selectedItemThree}
        />
      </View>
    );
  }
}

import React, { Component } from 'react';
import { Select } from 'material-bread';

class SelectPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        selectedItem: ''
    }
  }
  render() {
    const data = [
      { id: 1, name: 'Option 1' },
      { id: 2, name: 'Option 2' },
      { id: 3, name: 'Option 3' },
    ];
    return (
      <Select
        label={'Select'}
        menuItems={data}
        onSelect={value => this.setState({ selectedItem: value.name })}
        selectedItem={this.state.selectedItem}
      />
    );
  }
}

Name

Description

Type

Default

buttonStyle

Styles for wrapping container around the input

object

fullWidth

Forces select button to be 100% width

bool

false

label

Label for textinput

string

menuItems

Items to display in menu dropdown

array

menuProps

Pass any props down to the Menu

object

onSelect

Callback when selecting new menu item

func

selectedItem

Item currently selected

string

style

Styles root element

object

textFieldProps

Pass any textFieldProps down the TextField

object

type

Chooses the style of select, outlined, flat, filled

string

flat

visible

Whether menu is visible

bool

You can see even more examples in the Storybook environment.

You can manipulate the base TextField component by passing in textFieldProps . This allows for example to add a leadingIcon .

Select





Select





Select





Live Editing

class DropdownPage extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
          selectedItem: '',
          selectedItemTwo: '',
          selectedItemThree: ''
      }
    }
    render() {
      const data = [
        { id: 1, name: 'Option 1' },
        { id: 2, name: 'Option 2' },
        { id: 3, name: 'Option 3' },
      ];
      return (
        <View >
          <Select
            label={'Select'}
            menuItems={data}
            onSelect={value => this.setState({ selectedItem: value.name })}
            selectedItem={this.state.selectedItem}
            textFieldProps={{
              leadingIcon: (
                <Icon name={'date-range'} size={24} color={'#6e6e6e'} />
              ),
            }}
          />
          <Select
            label={'Select'}
            type={'filled'}
            menuItems={data}
            onSelect={value => this.setState({ selectedItemTwo: value.name })}
            selectedItem={this.state.selectedItemTwo}
            textFieldProps={{
              leadingIcon: (
                <Icon name={'date-range'} size={24} color={'#6e6e6e'} />
              ),
            }}
          />
          <Select
            label={'Select'}
            type={'outlined'}
            menuItems={data}
            onSelect={value => this.setState({ selectedItemThree: value.name })}
            selectedItem={this.state.selectedItemThree}
            textFieldProps={{
              leadingIcon: (
                <Icon name={'date-range'} size={24} color={'#6e6e6e'} />
              ),
            }}
          />
        </View>
      );
    }
  }

Select

Component #

Usage #

Props #

Demos #

TextField Props #