Selects

N2 Styles uses Selectize.js for all dropdowns by default. Refer to their documentation for a more complete list of its options and capabilities.

Initialization

Select elements with the selectize class (added by default to all selects created through the MaterialForm select helpers) will be initialized with the position_dropdown_within_viewport and remove_button plugins enabled automatically.

Automatic Initialization Example

%select.selectize{ placeholder: "This is the placeholder text." }
  %option
  %option{ value: "0" } This is the first option.
  %option{ value: "1" } This is the second option.
  %option{ value: "2" } This is the third option.

To avoid this and initialize a select element with selectize yourself, add the selectize-custom-initializer class.

Manual Initialization Example

%select.my-select.selectize.selectize-custom-initializer{ placeholder: "This is the placeholder text." }
  %option{ value: "0" } This is the first option.
  %option{ value: "1" } This is the second option.
  %option{ value: "2" } This is the third option.
$("select.my-select").selectize({
  plugins: {
    position_dropdown_within_viewport: true,
    remove_button: { label: '', className: 'remove' }
  }
});

Position Within Viewport

By default, selectize will always open downward regardless of whether there is sufficient space remaining in the viewport for the dropdown. To have the dropdown conditionally open upward instead, enable the position_dropdown_within_viewport plugin.

Default Example

%select.my-downward-select.selectize.selectize-custom-initializer
  - 100.times do |i|
    %option{ value: i }= i
$("select.my-downward-select").selectize();

Position Within Viewport Example

%select.my-position-within-viewport-select.selectize.selectize-custom-initializer
  - 100.times do |i|
    %option{value: i}= i
$("select.my-position-within-viewport-select").selectize({
  plugins: {
    position_dropdown_within_viewport: true
  }
});

React Select Dropdown

Continue referring to the Selectize documentation for a complete list of its options and capabilities. Keep in mind that the N2 implementation/wrapper does not implement all Selectize features.

Props for Select: Any N2-implemented Selectize setting can be passed in via a prop. The following is a list of several of the more commonly-used settings and attributes.

Optional: id: String
Optional: name: String
Optional: className: String
Optional: disabled: Boolean
Optional: multiple: Boolean (defaults to false )
Optional: handleChange: Function callback for onChange.
Optional: options: Array (of Array or Object) If passing arrays, the first element should be the text and the second element should be the value. Passing objects allows you to define custom fields, e.g. for sorting.
Optional: placeholder: String
Optional: allowCreate: Boolean (defaults to false ) Whether the user is allowed to create new options.
Optional: allowEmptyOption: Boolean (defaults to false )

Select with custom sort field


import React from 'react';
import { Select } from 'n2-styles';

function SelectExample() {
  const options = [
    { text: 'AAA', value: 1, sort: 0 },
    { text: 'BBB', value: 2, sort: 2 },
    { text: 'CCC', value: 3, sort: 1 },
  ];
  const sortField = [{ field: 'sort', direction: 'asc' }];

  return (
    <Select
      id="select-example"
      sortField={sortField}
      name="select-example"
      options={options}
      allowEmptyOption
    />
  );
}

export { SelectExample };