Example:

<CustomSelect
  name="country"
  options={[{ text: 'Italy', value: 'it'}, { text: 'Germany', value: 'de'}, { text: 'Spain', value: 'es' },{ text: 'France', value: 'fr' }, { text: 'Portugal', value: 'pt' }, { text: 'Switzerland', value: 'ch' }, { text: 'Poland', value: 'pl' }]}
  value=""
  label="My label"
/>

Invalid selection example:

<CustomSelect
  name="country"
  options={[{ text: 'Italy', value: 'it' },{ text: 'Poland', value: 'pl' }]}
  label="Component with an error"
  noSelectionLabel="Select counrty"
  valid={false}
  errorMessage="Please select a value!"
/>

Note example:

<CustomSelect
  name="country"
  options={[{ text: 'Italy', value: 'it' },{ text: 'Poland', value: 'pl' }]}
  label="Component with a note"
  note="A note is smaller then a label"
  noSelectionLabel="Select counrty"
/>

Invalid selection with note example:

<CustomSelect
  name="country"
  options={[{ text: 'Italy', value: 'it' },{ text: 'Poland', value: 'pl' }]}
  label="Component with an error"
  noSelectionLabel="Select counrty"
  valid={false}
  note="A note is smaller then a label"
  errorMessage="Please select a value!"
/>

Custom option markup example:

<CustomSelect
  name="country"
  options={[{ text: 'Germany', value: 'de', markup: <span style={{color: 'red', textDecoration: 'underline'}}>Germany</span>}, { text: 'Spain', value: 'es' }]}
  value=""
  label="Custom markup"
/>