react-multi-fields-input

React Multi Fields Input component

React Multi Fields Input component comes with zero styles to allow you style it in accordance to your style guidelines.

<MultiFieldsInput
  label="Sort Code"
  name="codeSort"
  inputs={[
    {
      maxLength: 2,
      placeholder: '00',
    },
    {
      maxLength: 2,
      placeholder: '00',
    },
    {
      maxLength: 2,
      placeholder: '00',
    },
  ]}
  value="202020"
  error={`Invalid input`}
  onBlur={() => {}}
  onChange={() => {}}
/>

See more live examples on the website.

Props

prop	required	type	default
inputs	yes	Input[]
name	yes	string
onBlur	yes	function
onChange	no	function	undefined
error	no	string	''
value	no	string	''
autoFocus	no	boolean	true
styles	no	object	{}

Input[] is an array of objects with following properties

prop	required	type	default
maxLength	yes	number
placeholder	no	string	''

styles prop is an object with properties to style each part of the component. You could then give it custom styles as you normally would for inline, e.g.

const styles = {
  container: {
    width: 'auto',
  },
  label: {
    width: '100%',
    color: '#4A5568',
    fontWeight: 'bold',
    marginBottom: '0.3em',
    fontSize: '15px',
    display: 'block',
  },
  inputContainer: {
    display: 'flex',
    justifyContent: 'space-between',
    width: '100%',
  },
  input: {
    borderRadius: '5px',
    padding: '0.75em 1em',
    border: '1px solid #A0AEC0',
    color: '#2D3748',
    maxWidth: '7em',
  },
  error: {
    boxSizing: 'border-box',
    marginTop: '0.7em',
    padding: '0.75em 1em',
    backgroundColor: '#FED7D7',
    display: 'block',
    borderRadius: '5px',
    fontWeight: 'bold',
    color: '#C53030',
    fontSize: '13px',
    width: '100%',
  },
}

The object that is being returned onBlur and onChange:

{ name: '', value: ''}

Develop

yarn
yarn start

Storybook starts on localhost:3001.

Build

yarn build

Build script builds component only. Storybook is built with storybook:build by Netlify.