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.