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.
| 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: ''}yarn
yarn start
Storybook starts on localhost:3001.
yarn build
Build script builds component only. Storybook is built with storybook:build by Netlify.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent