Select box form component


20234.0.182 months ago4 years agoMinified + gzip package size for @crave/farmblocks-input-select in KB


Farmblocks Select Input

A component for rendering Select inputs


npm install @crave/farmblocks-input-select


import React, { Component } from 'react';
import { render } from 'react-dom';
import Select from '@crave/farmblocks-input-select';

const items = [
  { value: "1", label: "Apple" },
  { value: "2", label: "Banana" },
  { value: "3", label: "Pear" }

class App extends Component {
  render() {
    return (
        placeholder="Select fruit"
        onChange={(value) => console.log("onChange", value)}

render(<App />, document.getElementById('root'));

This code will render:



Property Description Type Required Default
items Items to be rendered as options ArrayOf({ value: string, label: string, image: (optional)string }) x
value Selected option string, number or array of those (for multi)
width Width of the component string 200px
onChange Function to handle selection of an item. onChange(value:string) () => false
renderItem Custom render item function renderItem(item): node
noResultsMessage Custom no results message to be displayed when there is no result available on search string
disableSearch Disables item search boolean false
maxHeight Set a maximum height for the menu string
fontSize One of the constants in fontSizes from farmblocks-theme package. For convenience, fontSizes is also exported on this package number
id DOM element Id attribute string
multi Defines if multiple items can be selected boolean false
onMenuVisibilityChange Invoked when the react-autocomplete menu visibility changes func

Subcomponent: Item

This subcomponent is exported so it can reused by components that have similar visuals:

  • @crave/farmblocks-search-field


import { Item } from "@crave/farmblocks-input-select";

const Component = () => (
    <Item label="First Item" />
    <Item label="Second Item" />


Property Description Type Required Default
label Text to display on Item string x
image Path for image to display on Item string



If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.