Select

Select allows users to choose one option from a prescribed list.

Import Syntax

xxxxxxxxxx
 
import Select from 'calcite-react/Select';

Basic Usage

 
<Select onChange={value => console.log(value)}>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

Alternate Styles

fullWidth

Value:

FormControlLabel

appendToBody

menuStyle={{maxHeight: 'none'}}

 
<GuideExample label="fullWidth">
  <Select fullWidth onChange={value => console.log(value)}>
    <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>
  </Select>
</GuideExample>
<GuideExample label="FormControlLabel">
  <FormControl>
    <FormControlLabel>Value:</FormControlLabel>
    <Select onChange={value => console.log(value)}>
      <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>
    </Select>
  </FormControl>
</GuideExample>
<GuideExample label="appendToBody">
  <Select appendToBody onChange={value => console.log(value)}>
    <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>
  </Select>
</GuideExample>
<GuideExample label="menuStyle={{maxHeight: 'none'}}">
  <Select
    menuStyle={{ maxHeight: 'none' }}
    onChange={value => console.log(value)}
  >
    <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>
  </Select>
</GuideExample>

Controlled Select

selectedItem={this.state.selectedValue}

selectedItem={this.state.selectedItem}

 
() => {
  class SelectStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        selectedValue: 10,
        selectedItem: null,
      }
      this.handleSelectChange = this.handleSelectChange.bind(this)
    }
​
    handleSelectChange(value, item) {
      this.setState({
        selectedValue: value,
        selectedItem: item,
      })
    }
​
    render() {
      return (
        <div>
          <GuideExample label="selectedItem={this.state.selectedValue}">
            <Select
              onChange={this.handleSelectChange}
              selectedValue={this.state.selectedValue}
            >
              <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>
            </Select>
          </GuideExample>
          <GuideExample label="selectedItem={this.state.selectedItem}">
            <Select
              onChange={this.handleSelectChange}
              selectedItem={this.state.selectedItem}
            >
              <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>
            </Select>
          </GuideExample>
        </div>
      )
    }
  }
​
  return <SelectStory />
}

Filterable

 
() => {
  class SelectStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        selectedValue: '',
      }
      this.handleSelectChange = this.handleSelectChange.bind(this)
    }
​
    handleSelectChange(value, item) {
      this.setState({
        selectedValue: value,
      })
    }
​
    render() {
      return (
        <Select
          filterable
          onChange={this.handleSelectChange}
          selectedValue={this.state.selectedValue}
        >
          {statesJson.states.map(state => {
            return (
              <MenuItem key={state} value={state}>
                {state}
              </MenuItem>
            )
          })}
        </Select>
      )
    }
  }
​
  return <SelectStory />
}

Filterable autoSelect

 
() => {
  class SelectStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        selectedValue: '',
      }
      this.handleSelectChange = this.handleSelectChange.bind(this)
    }
​
    handleSelectChange(value, item) {
      this.setState({
        selectedValue: value,
      })
    }
​
    render() {
      return (
        <Select
          filterable
          autoSelect
          virtualized
          onChange={this.handleSelectChange}
          selectedValue={this.state.selectedValue}
        >
          {statesJson.states.map(state => {
            return (
              <MenuItem key={state} value={state}>
                {state}
              </MenuItem>
            )
          })}
        </Select>
      )
    }
  }
​
  return <SelectStory />
}

Minimal

 
<Select minimal onChange={() => console.log('onChange')}>
  <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>
</Select>

Virtualized

 
() => {
  class SelectStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        selectedValue: '',
      }
      this.handleSelectChange = this.handleSelectChange.bind(this)
    }
​
    handleSelectChange(value, item) {
      this.setState({
        selectedValue: value,
      })
    }
​
    render() {
      return (
        <Select
          virtualized
          virtualizedMenuWidth={250}
          onChange={this.handleSelectChange}
          selectedValue={this.state.selectedValue}
        >
          {statesJson.states.map(state => {
            return (
              <MenuItem key={state} value={state}>
                {state}
              </MenuItem>
            )
          })}
        </Select>
      )
    }
  }
​
  return <SelectStory />
}

with Formik

State:

{
  "state": ""
}

 
() => {
  class SelectWithFormikStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        selectedValue: 10,
        selectedItem: null,
      }
      this.formValues = {
        state: '',
      }
​
      this.handleSelectChange = this.handleSelectChange.bind(this)
      this.onSubmit = this.onSubmit.bind(this)
      this.onValidate = this.onValidate.bind(this)
    }
​
    handleSelectChange(value, item) {
      this.setState({
        selectedValue: value,
        selectedItem: item,
      })
    }
​
    onSubmit(values, actions) {
      setTimeout(() => {
        console.log(values)
        actions.setSubmitting(false)
      }, 1000)
    }
​
    onValidate(values) {
      const errors = {}
      if (!values.state) {
        errors.state = 'Required 🤨'
      } else if (values.state !== 'Colorado') {
        errors.state = 'You have to live in Colorado to use this form 😉'
      }
​
      return errors
    }
​
    render() {
      return (
        <Formik
          initialValues={this.formValues}
          validate={this.onValidate}
          onSubmit={this.onSubmit}
        >
          {({ values, errors, touched, handleSubmit, isSubmitting }) => (
            <Form onSubmit={handleSubmit}>
              {/* state */}
​
              <FormControl
                success={touched.state && !errors.state ? true : false}
                error={touched.state && errors.state ? true : false}
              >
                <FormControlLabel htmlFor="state">State:</FormControlLabel>
                <Field component={Select} name="state">
                  {statesJson.states.map(state => {
                    return (
                      <MenuItem key={state} value={state}>
                        {state}
                      </MenuItem>
                    )
                  })}
                </Field>
                <FormHelperText>
                  {(touched.state && errors.state) || null}
                </FormHelperText>
              </FormControl>
​
              <FormControl>
                <Button type="submit" disabled={isSubmitting}>
                  {isSubmitting ? 'Submitting.......' : 'Submit'}
                </Button>
              </FormControl>
              <pre>{JSON.stringify(values, null, 2)}</pre>
            </Form>
          )}
        </Formik>
      )
    }
  }
​
  return <SelectWithFormikStory />
}

Ridiculous Example

 
<Select onChange={() => console.log('onChange')}>
  <li value={10}>Go to Online</li>
  <option value={20}>Help</option>
  <Alert value={30}>Sign Out</Alert>
  <div value={40}>I'm a div!</div>
  <Card
    value={50}
    label="Card Option"
    bar="green"
    style={{ margin: '0 5px', width: '300px' }}
  >
    <CardContent>
      <CardTitle>Card with Colored Bar</CardTitle>
      <p>
        Every color in calcite can be used as a colored "bar" along the top of
        a card to provide a bit of visual punch with{' '}
        <code>
          bar="
          {'{color}'}"
        </code>
      </p>
    </CardContent>
  </Card>
</Select>

Props

Property	Type	Required	Default	Description
placeholder	String	false	Select...	Placeholder text for the input.
placement	Enum	false	bottom-start	Specify where the menu should appear in relation to the Select element.
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.
children	Node	false	-	Nodes to be used as options in the Select.
filterable	Bool	false	-	Toggle the Select to use an input and allow filtering of the items.
autoSelect	Bool	false	-	The highlighted item will be automatically selected on blur.
virtualized	Bool	false	-	Use react-virtualized to render rows as the user scrolls.
selectedItem	Node	false	-	The selected item of the Select.
selectedValue	Any	false	-	Value of the selected item.
renderValue	Func	false	-	Function to run when determining how to display selected values in a collapsed Select.
fullWidth	Bool	false	-	Whether or not the Select will fill its container's width.
minimal	Bool	false	-	A style variant for Select inputs.
id	String	false	-	HTML prop for the Select; works together with a label's `for` prop.
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`.
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

Notes

For keyboard interaction, Select menus can be opened and selected from using the Spacebaror the Enter keys. The Enter key does not trigger form submission when a Select is in focus. When using a filterable Select, the menu can be opened with the Down Arrow key. A Select can be closed without altering its value with the Escape key.

Calcite React