MaterialR Select

@materialr/select

React Material select implementation.

Installation

$ npm install --save @materialr/select

Demo

A full demo is available on the MaterialR website showcasing all variants.

Components

Default export

import Select from '@materialr/select';

Props

| Prop | Type | Required | Default | Description | | ------------- | ------ | -------- | ---------- | ---------------------------------------------- | | box | bool | No | false | Whether to render with a box style | | children | node | Yes | N/A | The child elements to render inside the select | | className | string | No | undefined | Additional classNames to add | | disabled | bool | No | false | Whether to render a disabled select | | id | string | No | uuidv1() | The id for the select element | | name | string | No | undefined | The name attribute of the select element | | onBlur | func | No | undefined | The blur event handler | | onChange | func | No | undefined | The change event handler | | onDragStart | func | No | undefined | The dragstart event handler | | onDrop | func | No | undefined | The drop event handler | | onFocus | func | No | undefined | The focus event handler | | value | string | No | undefined | The selected value |

Named exports

import { SelectGroup } from '@materialr/select';

Props

| Prop | Type | Required | Default | Description | | ---------- | ----------- | -------- | ------- | --------------------------------------------- | | children | node/[node] | Yes | N/A | The child elements to render inside the group | | label | string | Yes | N/A | The label to display for the group |

import { SelectOption } from '@materialr/select';

Props

| Prop | Type | Required | Default | Description | | ---------- | ------------- | -------- | ------- | ---------------------------------- | | disabled | bool | No | false | Whether the option is disabled | | label | string | Yes | N/A | The label to display for the group | | value | number/string | Yes | N/A | The value for the option |