Select

Props

NamePropTypeRequiredDefault ValueAllowed ValuesDescription
blockboolfalsetrue
classNamesobjectOffalse{}string
disabledboolfalsefalse
dropdownRightenumfalsenull
  • xs
  • sm
  • md
  • lg
  • xl
dropdownUpboolfalsefalse
dropdownWidthenumfalsenull
  • sm
  • md
  • lg
idstringfalseundefined
inverseboolfalsefalse
onBlurfuncfalsenull
onChangefunctrue
onFocusfuncfalsenull
onSearchChangefuncfalseundefinedTo have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array. DO NOT USE TOGETHER WITH `search` PROPERTY
optionsarrayOftrue{value, label, header, icon, currency, note, secondary, separator, disabled, searchStrings}
placeholderstringfalseundefined
requiredboolfalsefalse
searchunionfalsefalse
  • bool
  • func
Search toggle if `true` default search functionality being enabled (not case sensitive search in option labels & currency props) if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
searchPlaceholderstringfalseSearch...
searchValuestringfalse
selectedshapefalsenull[{"value":"any"},{"label":"node"},{"icon":"node"},{"currency":"string"},{"note":"node"},{"secondary":"node"}]
sizeenumfalsemd
  • sm
  • md
  • lg
Edit these docs on Github