MultiSelect

MultiSelect allows users to choose one or more options from a prescribed list.

Import Syntax

xxxxxxxxxx
 
import MultiSelect from 'calcite-react/MultiSelect'

Basic Usage

 
() => {
  class MultiSelectExample extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        selectedValues: [10],
      }
      this.handleMultiSelectChange = this.handleMultiSelectChange.bind(this)
    }
​
    handleMultiSelectChange(values, items) {
      this.setState({
        selectedValues: values,
      })
    }
​
    render() {
      return (
        <MultiSelect
          onChange={this.handleMultiSelectChange}
          selectedValues={this.state.selectedValues}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </MultiSelect>
      )
    }
  }
​
  return <MultiSelectExample />
}

Advanced Usage

selectedItem={this.state.selectedValues}

fullWidth

appendToBody

closeOnSelect={false}

 
() => {
  class MultiSelectExample extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        selectedValues: [10],
      }
      this.handleMultiSelectChange = this.handleMultiSelectChange.bind(this)
    }
​
    handleMultiSelectChange(values, items) {
      this.setState({
        selectedValues: values,
      })
    }
​
    render() {
      return (
        <div>
          <GuideExample label="selectedItem={this.state.selectedValues}">
            <MultiSelect
              onChange={this.handleMultiSelectChange}
              selectedValues={this.state.selectedValues}
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
              <MenuItem value={40}>Fourty</MenuItem>
              <MenuItem value={50}>Fifty</MenuItem>
              <MenuItem value={60}>Sixty</MenuItem>
              <MenuItem value={70}>Seventy</MenuItem>
              <MenuItem value={80}>Eighty</MenuItem>
              <MenuItem value={90}>Ninety</MenuItem>
              <MenuItem value={100}>One Hundred</MenuItem>
            </MultiSelect>
          </GuideExample>
          <GuideExample label="fullWidth">
            <MultiSelect
              fullWidth
              onChange={this.handleMultiSelectChange}
              selectedValues={this.state.selectedValues}
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
              <MenuItem value={40}>Fourty</MenuItem>
              <MenuItem value={50}>Fifty</MenuItem>
              <MenuItem value={60}>Sixty</MenuItem>
              <MenuItem value={70}>Seventy</MenuItem>
              <MenuItem value={80}>Eighty</MenuItem>
              <MenuItem value={90}>Ninety</MenuItem>
              <MenuItem value={100}>One Hundred</MenuItem>
            </MultiSelect>
          </GuideExample>
          <GuideExample label="appendToBody">
            <MultiSelect
              onChange={this.handleMultiSelectChange}
              selectedValues={this.state.selectedValues}
              appendToBody
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
              <MenuItem value={40}>Fourty</MenuItem>
              <MenuItem value={50}>Fifty</MenuItem>
              <MenuItem value={60}>Sixty</MenuItem>
              <MenuItem value={70}>Seventy</MenuItem>
              <MenuItem value={80}>Eighty</MenuItem>
              <MenuItem value={90}>Ninety</MenuItem>
              <MenuItem value={100}>One Hundred</MenuItem>
            </MultiSelect>
          </GuideExample>
          <GuideExample label="closeOnSelect={false}">
            <MultiSelect
              onChange={this.handleMultiSelectChange}
              selectedValues={this.state.selectedValues}
              closeOnSelect={false}
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
              <MenuItem value={40}>Fourty</MenuItem>
              <MenuItem value={50}>Fifty</MenuItem>
              <MenuItem value={60}>Sixty</MenuItem>
              <MenuItem value={70}>Seventy</MenuItem>
              <MenuItem value={80}>Eighty</MenuItem>
              <MenuItem value={90}>Ninety</MenuItem>
              <MenuItem value={100}>One Hundred</MenuItem>
            </MultiSelect>
          </GuideExample>
        </div>
      )
    }
  }
​
  return <MultiSelectExample />
}

Custom Label Renderer

 
() => {
  class MultiSelectExample extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        selectedValues: [10, 20, 30],
      }
      this.handleMultiSelectChange = this.handleMultiSelectChange.bind(this)
      this.renderValue = this.renderValue.bind(this)
    }
​
    handleMultiSelectChange(values) {
      this.setState({
        selectedValues: values,
      })
    }
​
    renderValue(items) {
      if (!items || items.length === 0) {
        return 'Select an Option'
      } else if (items.length > 2) {
        // Template literals currently are not supported by MDX:
        // https://github.com/mdx-js/mdx/issues/218
        return items.length + ' Items Selected'
      } else {
        return items.map(item => item.props.children).join(', ')
      }
    }
​
    render() {
      return (
        <div>
          <MultiSelect
            renderValue={this.renderValue}
            onChange={this.handleMultiSelectChange}
            selectedValues={this.state.selectedValues}
          >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
            <MenuItem value={40}>Fourty</MenuItem>
            <MenuItem value={50}>Fifty</MenuItem>
            <MenuItem value={60}>Sixty</MenuItem>
            <MenuItem value={70}>Seventy</MenuItem>
            <MenuItem value={80}>Eighty</MenuItem>
            <MenuItem value={90}>Ninety</MenuItem>
            <MenuItem value={100}>One Hundred</MenuItem>
          </MultiSelect>
        </div>
      )
    }
  }
​
  return <MultiSelectExample />
}

Minimal

 
() => {
  class MultiSelectExample extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        selectedValues: [10],
      }
      this.handleMultiSelectChange = this.handleMultiSelectChange.bind(this)
    }
​
    handleMultiSelectChange(values, items) {
      this.setState({
        selectedValues: values,
      })
    }
​
    render() {
      return (
        <div>
          <MultiSelect
            minimal
            onChange={this.handleMultiSelectChange}
            selectedValues={this.state.selectedValues}
          >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
            <MenuItem value={40}>Fourty</MenuItem>
            <MenuItem value={50}>Fifty</MenuItem>
            <MenuItem value={60}>Sixty</MenuItem>
            <MenuItem value={70}>Seventy</MenuItem>
            <MenuItem value={80}>Eighty</MenuItem>
            <MenuItem value={90}>Ninety</MenuItem>
            <MenuItem value={100}>One Hundred</MenuItem>
          </MultiSelect>
        </div>
      )
    }
  }
​
  return <MultiSelectExample />
}

Virtualized

 
() => {
  class MultiSelectStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        selectedValues: [],
      }
      this.handleMultiSelectChange = this.handleMultiSelectChange.bind(this)
    }
​
    handleMultiSelectChange(values, items) {
      this.setState({
        selectedValues: values,
      })
    }
​
    render() {
      return (
        <div>
          <MultiSelect
            virtualized
            virtualizedMenuWidth={250}
            onChange={this.handleMultiSelectChange}
            selectedValues={this.state.selectedValues}
          >
            {statesJson.states.map(state => {
              return (
                <MenuItem key={state} value={state}>
                  {state}
                </MenuItem>
              )
            })}
          </MultiSelect>
        </div>
      )
    }
  }
​
  return <MultiSelectStory />
}

With Formik

Favorite Dogs:

{
  "dogs": []
}

 
() => {
  const formValues = {
    dogs: [],
  }
  const dogOptions = [
    { name: 'Afghan Hound', value: 'afghanhound' },
    { name: 'Basenji', value: 'basenji' },
    { name: 'Bulldog', value: 'bulldog' },
    { name: 'Chihuahua', value: 'chihuahua' },
    { name: 'Great Dane', value: 'greatdane' },
    { name: 'Labrador Retriever', value: 'labrador' },
    { name: 'Yorkie', value: 'yorkie' },
    { name: 'Whippet', value: 'whippet' },
  ]
​
  const onSubmit = (values, actions) => {
    setTimeout(() => {
      console.log(values)
      actions.setSubmitting(false)
    }, 1000)
  }
​
  const onValidate = values => {
    const errors = {}
    if (!values.dogs.length) {
      errors.dogs = 'You must like at least one... 🤨'
    }
​
    return errors
  }
​
  return (
    <Formik
      initialValues={formValues}
      validate={onValidate}
      onSubmit={onSubmit}
    >
      {({ values, errors, touched, handleSubmit, isSubmitting }) => (
        <GuideExample>
          <Form onSubmit={handleSubmit}>
            {/* dogs */}
            <FormControl
              success={touched.dogs && !errors.dogs ? true : false}
              error={touched.dogs && errors.dogs ? true : false}
            >
              <FormControlLabel htmlFor="token">
                Favorite Dogs:
              </FormControlLabel>
              <Field component={MultiSelect} name="dogs">
                {dogOptions.map(dog => (
                  <MenuItem key={dog.value} value={dog.value}>
                    {dog.name}
                  </MenuItem>
                ))}
              </Field>
              <FormHelperText>
                {(touched.dogs && errors.dogs) || null}
              </FormHelperText>
            </FormControl>
            <FormControl>
              <Button type="submit" disabled={isSubmitting}>
                {isSubmitting ? 'Submitting.......' : 'Submit'}
              </Button>
            </FormControl>
            <pre>{JSON.stringify(values, null, 2)}</pre>
          </Form>
        </GuideExample>
      )}
    </Formik>
  )
}

Props

Property	Type	Required	Default	Description
placeholder	String	false	Select...	Placeholder text for the input.
placement	Enum	false	bottom-start	Placement of the popover in relation to the target.
closeOnSelect	Bool	false	true	Whether or not to close the menu on each selection.
virtualizedRowHeight	Union	false	42	(virtualized only) Row height used to calculate how many rows to render in a virtualized Menu.
onChange	Func	false	() => {}	Callback function fired when the value of the Select changes.
onBlur	Func	false	() => {}	Callback function fired when the Select element is blurred.
children	Node	false	-	Nodes to be used as options in the Select.
selectedItem	Node	false	-	The selected item of the Select.
selectedValue	Node	false	-	Value of the selected item.
renderValue	Func	false	-	Function to run when determining how to display selected values in a collapsed MultiSelect.
fullWidth	Bool	false	-	Whether or not the Select will fill its container's width.
minimal	Bool	false	-	A style variant for Select inputs.
menuStyle	Object	false	-	Style prop applied to the menu wrapper.
positionFixed	Bool	false	-	Uses `position: fixed` on the tooltip allowing it to show up outside of containers that have `overflow: hidden`.
virtualized	Bool	false	-	Use react-virtualized to render rows as the user scrolls.
virtualizedMenuWidth	Number	false	-	(virtualized only) Width of the menu; unloaded rows may be wider than the initial set.
popperModifiers	Object	false	-	Modifiers to be passed to the Popper element

Calcite React

MultiSelect

Import Syntax

Basic Usage

Advanced Usage

Custom Label Renderer

Minimal

Virtualized

With Formik

Props