Search
showing results for - "react select with custom option"
Alienor
19 Nov 2017
1import React from "react";
2import ReactDOM from "react-dom";
3import Select from "react-select";
4
5const options = [
6  { value: "Abe", label: "Abe", customAbbreviation: "A" },
7  { value: "John", label: "John", customAbbreviation: "J" },
8  { value: "Dustin", label: "Dustin", customAbbreviation: "D" }
9];
10
11const formatOptionLabel = ({ value, label, customAbbreviation }) => (
12  <div style={{ display: "flex" }}>
13    <div>{label}</div>
14    <div style={{ marginLeft: "10px", color: "#ccc" }}>
15      {customAbbreviation}
16    </div>
17  </div>
18);
19
20const CustomControl = () => (
21  <Select
22    defaultValue={options[0]}
23    formatOptionLabel={formatOptionLabel}
24    options={options}
25  />
26);
27
28ReactDOM.render(<CustomControl />, document.getElementById("root"));
source
similar questions
cascading dropdown for forms reactreact native select optionselect in react with nchangereact selectuse onchange with react selectreact multiple select dropdownreact selectreact select examplereact select optionshow set default value for react selectreact select search getoptionsreact select search useselect hookreact select npmselect field in react nativejsx on select value changereactstrap dropdown selectsemantic ui dropdown value reactimport dropdown react
queries leading to this page
custom select component reactdynamic option select reacthow to customise options in react selectselect option reacthow to customised react selectadding a custom option in react selectreact custom html attribute select optionreact select menu customreact select add custom optionreact select custom option stylereact select components optioncustom select component react with ul li show custom value react selectreact select custom optionreact select option componentcustomize select tag react jsreact custom select from inputhow to have a custom option and custom input in one react selectreact select with custom optionhow to customize react selectreact select custom option renderreact select custom componentsreact select custom option linkreact select component customcustom select componennt reactreactjs customize optioncustom select component in reactreact button select option 3coption value reactdefault select on react selectcustom select reactjsreact custom select menureact select custom onchangecustom selected reactreact select custom option component examplereact customizing selectreact select codepencustom select in reactcustom select reacthow to change select component value in reactangular select option from databasereact select custom option componenthow customize select tag in react jscreate custom select reactcustom select react hocustom select react jscustom select in react jsselect dropdown react customreact custom dropdown using select tag react custom select examplereact select custome component react select from custom listreact select custom stylecustom 22select 22 react selectselect react example custom stylereact select box with custom fieldhow to customize react select componentcustomise select from react selectcreate custom select component within reactcustom react selectreact select css customcustom select option and button reactreact select cstom selected optioncustom dropdown react selectreact custome select box react select option custom designreact select option style customcustom in react selectreact select custom style examplecustom component react select selected valuereact select custom componentreact custom select componentcustom option react selectcustome react selectcustom option content react selectselect reactcustomize react selectreact select options custom value custom option react select selected stylecustom class on react select dropdown listcreate a custom select component reactreact select onclick on custom optionreact select override component optioncustom option react selectreact select custom component examplemaking custom select component in react jsreact select with custom componentcustomise react select selected input valuereact select custom option componentreact custom select v1 different text in select and in drop down optioncustomising styles react selectcustom options react selectreact select custom tagsreact custom select elementcreate custom select dropdown react examplecustom select box in react js codepencreate a custom select component in reactcustom select react componentreact custom select boxreact custom select inputreact select custom option render 22react select 22 custom render 22react select 22 custom tagcustom select box reactreact select dropdown with custom componentcustom select components in reactreact select custom dropdownreact select custom examplehow to use custom component in react selectselect react componentreact custom select dropdownreact select custom componentreact js select componet customreact select custom option typescriptcreate custom select list in reactreact select custom textcustom react select tagstyle react selectgiving custom components react selectcustomize select option in reactreact select option component examplereact chained selectreact custom select dropdown customreact select custom component examplecustom select option reactreact custom dropdown get optioncan we give custom styles select dropdown in react jshow to customize options in react selectcustom select dropdown reactreact select customoptionreact custom select listmulti option select in reactreactjs custom select dropdownrender selected as custom in react selectreact select custom optioncreate custom select dropdown reactcustom select field reactreact custom component inside optionreact select custom fieldsreact select customreact customize select optionsreact select boxreact select options custom fieldscustom event for select dropdown reacthow to use custom attributes in react selectnot able click on custom option element react selctreact select custom cssreact custom dropdown selectreact select democreate custom select in reactdisplay custom select option in reactreact select option custom attributescustom select dropdown in reactcustomize options div select reactcustom style option react selectreact select customizeadd custom components inside select react jsreact custom selecthow to use react to create select optionreact select custom optionscustomized select tag in html in reactcustom react select box component examplehow to add custom style in react selectreact js rsuite select examplereact select with custom option