Dropdowns View Source



The Dropdown component is used to present the user a list of values where they can select a single option.



Imports


Import React and the SelectMenu and/or the SelectCountryMenu Components.


0
import * as React from "react";
1
import { SelectMenu, SelectCountryMenu } from "slate-react-system";


Dropdown


Pick a horoscope


Pick a horoscope (full length)



Define the dropdown menu options. Each entry must have a name and a value.

0
const SELECT_MENU_OPTIONS = [
1
  { value: "1", name: "Capricorn" },
2
  { value: "2", name: "Aquarius" },
3
  { value: "3", name: "Pisces" },
4
  { value: "4", name: "Aries" },
5
  { value: "5", name: "Taurus" },
6
  { value: "6", name: "Gemini" },
7
  { value: "7", name: "Cancer" },
8
  { value: "8", name: "Leo" },
9
  { value: "9", name: "Virgo" },
10
  { value: "10", name: "Libra" },
11
  { value: "11", name: "Scorpio" },
12
  { value: "12", name: "Sagittarus" },
13
];


Declare the Dropdown component. Default values can be assigned using value.

0
class ExampleOne extends React.Component {
1
  state = { exampleOne: "1" };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <SelectMenu
8
        label="Pick a horoscope"
9
        name="exampleOne"
10
        value={this.state.exampleOne}
11
        category="horoscope"
12
        onChange={this._handleChange}
13
        options={SELECT_MENU_OPTIONS}
14
      />
15
    );
16
  }
17
}
18
19
class ExampleTwo extends React.Component {
20
  state = { exampleTwo: "3" };
21
22
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
23
24
  render() {
25
    return (
26
      <SelectMenu
27
        label="Pick a horoscope (full length)"
28
        name="exampleTwo"
29
        full
30
        value={this.state.exampleTwo}
31
        category="horoscope"
32
        onChange={this._handleChange}
33
        options={SELECT_MENU_OPTIONS}
34
      />
35
    );
36
  }
37
}



Country Picker Dropdown


Pick your country



Declare a dropdown to select from a list of countries.

0
class ExampleThree extends React.Component {
1
  state = { exampleThree: "United States of America" };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <SelectCountryMenu
8
        label="Pick your country"
9
        name="countryMenu"
10
        full
11
        value={this.state.countryMenu}
12
        category="country"
13
        onChange={this._handleChange}
14
      />
15
    );
16
  }
17
}



Accepted React Properties


Dropdowns
NameTypeDefaultDescription
options
Array
[]
Array of options to select from. Each object in the array should have a name and value
onChange
function
null
Function called upon an onChange event
value
string
null
The value that the dropdown takes. Can be used to assign default values as well.
name
string
null
Input name
label
string
null
Label text
description
string
null
Description text
tooltip
string
null
Tooltip text
full
boolean
false
Sets width to 100% if true
category
string
null
Category text


ComponentsAvatar GroupButtonsCard TabsCheckboxesColorsDropdownsGlobeHover TileIconsInputsList EditorLoadersNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source