FileInput

import { FileInput } from 'marketing-ui'

function Demo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <FileInput
        label='Upload your files'
        button='Choose files'
        multiple
      />
      <FileInput
        label='Upload your files'
        button='Choose files'
        optional='(Optional)'
        multiple
      />
    </div>
  )
}

export default Demo

import { FileInput } from 'marketing-ui'

function Demo() {
  return (
    <FileInput
      label='Upload your files'
      button='Choose files'
      help='Accepted formats: PDF, JPG, PNG. Max 10 MB per file.'
      accept='.pdf,.jpg,.png'
      multiple
    />
  )
}

export default Demo

import { FileInput } from 'marketing-ui'

function Demo() {
  return (
    <FileInput
      label='Upload images'
      button='Choose files'
      help='Only images are accepted. Other files are marked invalid.'
      accept='image/png, image/jpeg'
      acceptError='File format is not supported.'
      multiple
    />
  )
}

export default Demo

import { FileInput } from 'marketing-ui'

function Demo() {
  return (
    <FileInput
      label='Upload your files'
      button='Choose files'
      help='Each file must be 1 MB or smaller. Larger files are marked invalid.'
      maxSize={1}
      sizeError='File is too large.'
      multiple
    />
  )
}

export default Demo

import { FileInput } from 'marketing-ui'

function Demo() {
  return (
    <FileInput
      label='Upload images'
      button='Choose files'
      help='Only images up to 1 MB are accepted. Min. 2 files, max. 5 files'
      accept='image/png, image/jpeg'
      maxSize={1}
      sizeError='File is too large.'
      acceptError='File format is not supported.'
      countError='Wrong number of files supplied.'
      minCount={2}
      maxCount={5}
      multiple
    />
  )
}

export default Demo

import { FileInput } from 'marketing-ui'

function Demo() {
  return (
    <FileInput
      label='Upload your files'
      button='Choose files'
      error='Please upload at least one file'
      multiple
    />
  )
}

export default Demo

import { FileInput } from 'marketing-ui'

function Demo() {
  return (
    <FileInput
      label='Upload your files'
      button='Choose files'
      disabled
    />
  )
}

export default Demo