Skip to main content

MoleculeSelectField

MoleculeSelectField is a component that wraps a composition of Label + some input (input, textarea, ...) + Validations Messages for a MoleculeSelect component

Installation​

$ npm install @s-ui/react-molecule-select-field --save

Usage​

After importing the component MoleculeSelectField like this

import MoleculeSelectField from '@s-ui/react-molecule-select-field'
import MoleculeSelectOption from '@s-ui/react-molecule-dropdown-option'

const IconCloseTag = () => <span>x</span>  
const IconArrowDown = () => <span>â–¼</span>  

const options = ['John','Paul','George','Ringo']

Basic usage​

<MoleculeSelectField
  label="Country"
  placeholder="Select a Country..."
  onChange={(_, {value}) => console.log(value)}
  iconArrowDown={<IconArrowDown />}
>
  {options.map((option, i) => (
    <MoleculeSelectOption key={i} value={option}>
      {option}
    </MoleculeSelectOption>
  ))}
</MoleculeSelectField>

Basic usage with multiselection​

<MoleculeSelectField
  label="Country"
  placeholder="Select a Country..."
  onChange={(_, {value}) => console.log(value)}
  iconArrowDown={<IconArrowDown />}
  iconCloseTag={<IconCloseTag />}
  multiselection
>
  {options.map((option, i) => (
    <MoleculeSelectOption key={i} value={option}>
      {option}
    </MoleculeSelectOption>
  ))}
</MoleculeSelectField>

With Error Message​

<MoleculeSelectField
    label="Country"
    placeholder="Select a Country..."
    onChange={(_, {value}) => console.log(value)}
    iconArrowDown={<IconArrowDown />}
    errorText="Error!"
  >
    {options.map((option, i) => (
      <MoleculeSelectOption key={i} value={option}>
        {option}
      </MoleculeSelectOption>
    ))}
</MoleculeSelectField>

With Alert Message​

<MoleculeSelectField
    label="Country"
    placeholder="Select a Country..."
    onChange={(_, {value}) => console.log(value)}
    iconArrowDown={<IconArrowDown />}
    alertText="Error!"
  >
    {options.map((option, i) => (
      <MoleculeSelectOption key={i} value={option}>
        {option}
      </MoleculeSelectOption>
    ))}
</MoleculeSelectField>

With Success Message​

<MoleculeSelectField
    label="Country"
    placeholder="Select a Country..."
    onChange={(_, {value}) => console.log(value)}
    iconArrowDown={<IconArrowDown />}
    successText="Success!"
  >
    {options.map((option, i) => (
      <MoleculeSelectOption key={i} value={option}>
        {option}
      </MoleculeSelectOption>
    ))}
</MoleculeSelectField>

With Help Text​

<MoleculeSelectField
    label="Country"
    placeholder="Select a Country..."
    onChange={(_, {value}) => console.log(value)}
    iconArrowDown={<IconArrowDown />}
    helpText="Read the instructions to write proper format"
  >
    {options.map((option, i) => (
      <MoleculeSelectOption key={i} value={option}>
        {option}
      </MoleculeSelectOption>
    ))}
</MoleculeSelectField>

State Management for this componente​

Like MoleculeSelect, MoleculeSelectField can also use the withStateValue hoc to create a stateful version of this component 

import {withStateValue} from '@s-ui/hoc'
import MoleculeSelectField from '@s-ui/react-molecule-select-field'

...

const MoleculeSelectFieldWithState = withStateValue(MoleculeSelectField)

Find full description and more examples in the demo page.