UikSelect

PropertyTypeRequiredDefault ValueDescription
classNameStringfalsenullclassName, e.g. "my-custom-styling"
placeholderReact.NodefalsenullPlaceholder
labelReact.NodefalsenullLabel
nameStringfalsenullIf name is set, the component will also render hidden input(s)
multiBooleanfalsefalseAllows multi select
optionsArray<{value, label}>false[]Array of objects with property value and label (display text)
valueArray<{value, label}>false[]Array of objects with property value and label (display text). Use this if you want to control selected values from outside. Use this with onChange property
defaultValueArray<value>false[]Array of values. These are preselected items on render
excludedArray<value>false[]Array of values. These values are excluded from selection
onChangeFunctionfalsenullTriggeres on change of the selection. First param is next selected items - Array<{value, label}
positionone of 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'falsebottomLeftPosition of the expanded options relative to the display button.
disabledBooleanfalsefalseDisables the select
...restanyfalseOther properties are passed down to the wrapping element

UikSelect Examples

ComponentExample Code
<UikSelect
  excluded={ [3] }
  placeholder="Action"
  options={ [
    {
      value: 1,
      label: 'Delete',
    },
    {
      value: 2,
      label: 'Something',
    },
    {
      value: 3,
      label: 'Here',
    },
  ] }
/>
<UikSelect
  defaultValue={ [
    1,
    2,
  ] }
  excluded={ [3] }
  placeholder="Action"
  multi
  options={ [
    {
      value: 1,
      label: 'Delete',
    },
    {
      value: 2,
      label: 'Something',
    },
    {
      value: 3,
      label: 'Here',
    },
  ] }
/>
Country
<UikSelect
  defaultValue={ [
    1,
    2,
  ] }
  placeholder="Select Country"
  multi
  label="Country"
  options={ [
    {
      value: 1,
      label: (
        <span>
          <img
            alt="english"
            src={ images.flag01 }
            style={ {
              marginRight: '10px',
            } }
          />
          ENG
        </span>
      ),
    },
    {
      value: 2,
      label: 'Something',
    },
    {
      value: 3,
      label: 'Here',
    },
  ] }
/>