Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Selector box file

v.1.0.0 | Saturn
Healthy
StorybookGithub

Input for uploading one or various files.

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefined style for quick use. Access them through the variant prop:

import { SelectorBoxFile } from '@kubit-ui-web/react-components'
12345678910
<SelectorBoxFile
  containerBoxStateContent={{
    ['DEFAULT']: {
      icon: { icon: 'ICON_GHOST' },
      actionText: { content: 'Browse and select a file' },
      description: { content: 'and upload it here' },
    },
    ['LOADING']: {
      icon: { icon: 'ICON_CLOUD_UPLOAD' },
      actionText: { content: 'Cancel upload' },

Basic component

For its basic function the containerBoxStateContent is required. It set the basic text and content so the user can easily use it. A title, subtitle, and description should be set for a correct understanding.

import { SelectorBoxFile } from '@kubit-ui-web/react-components'
12345678910
<SelectorBoxFile
  containerBoxStateContent={{
    ['DEFAULT']: {
      icon: { icon: 'ICON_GHOST' },
      actionText: { content: 'Browse and select a file' },
      description: { content: 'and upload it here' },
    },
    ['LOADING']: {
      icon: { icon: 'ICON_CLOUD_UPLOAD' },
      actionText: { content: 'Cancel upload' },

Also, a button and a tooltip can be add when more complex information is necessary.

import { SelectorBoxFile } from '@kubit-ui-web/react-components'
12345678910
<SelectorBoxFile
  button={{
    content: 'Link description',
    icon: { icon: 'ICON_PLACEHOLDER', altText: 'altText' },
    iconPosition: 'LEFT',
  }}
  containerBoxStateContent={{
    ['DEFAULT']: {
      icon: { icon: 'ICON_GHOST' },
      actionText: { content: 'Browse and select a file' },

Disabled

If DISABLED is TRUE it means that is a non interactive component.

import { SelectorBoxFile } from '@kubit-ui-web/react-components'
12345678910
<SelectorBoxFile
  containerBoxStateContent={{
    ['DEFAULT']: {
      icon: { icon: 'ICON_GHOST' },
      actionText: { content: 'Browse and select a file' },
      description: { content: 'and upload it here' },
    },
    ['LOADING']: {
      icon: { icon: 'ICON_CLOUD_UPLOAD' },
      actionText: { content: 'Cancel upload' },

Error

If ERROR is TRUE the component will communicate that something is not right. The type of error and the form of solving should be communicate through the errorMessage prop. Also, an errorMessageIcon can be set for further visual alert.

import { SelectorBoxFile } from '@kubit-ui-web/react-components'
12345678910
<SelectorBoxFile
  containerBoxStateContent={{
    ['DEFAULT']: {
      icon: { icon: 'ICON_GHOST' },
      actionText: { content: 'Browse and select a file' },
      description: { content: 'and upload it here' },
    },
    ['LOADING']: {
      icon: { icon: 'ICON_CLOUD_UPLOAD' },
      actionText: { content: 'Cancel upload' },

Multiple

If MULTIPLE is TRUE the user will be able to upload more than one file.

import { SelectorBoxFile } from '@kubit-ui-web/react-components'
12345678910
<SelectorBoxFile
  containerBoxStateContent={{
    ['DEFAULT']: {
      icon: { icon: 'ICON_GHOST' },
      actionText: { content: 'Browse and select a file' },
      description: { content: 'and upload it here' },
    },
    ['LOADING']: {
      icon: { icon: 'ICON_CLOUD_UPLOAD' },
      actionText: { content: 'Cancel upload' },

File specifications

  • maxSize: this prop sets the maximum size of the uploaded files can be settle in mb.

  • fileExtension: the allowed extensions of the files can be set as an array.

import { SelectorBoxFile } from '@kubit-ui-web/react-components'
12345678910
<SelectorBoxFile
  containerBoxStateContent={{
    ['DEFAULT']: {
      icon: { icon: 'ICON_GHOST' },
      actionText: { content: 'Browse and select a file' },
      description: { content: 'and upload it here' },
    },
    ['LOADING']: {
      icon: { icon: 'ICON_CLOUD_UPLOAD' },
      actionText: { content: 'Cancel upload' },
RadioButtonAccessibility
Selector box fileDesign Specs